bxSliderなどのスライダー用ライブラリで、スライド1つをA要素にして、スライドをクリックしたら別ページに飛ばしたい時。
動いた~★と思ったら、マウスでドラッグスライドしたらクリックしたのと同じように別ページに飛んでしまう!
そんな時は、A要素の ondragstart イベント(jQueryでは dragstart イベント)をキャンセルすると治るかもしれない。
// jQuery で dragstart キャンセル
$('.slider').on('dragstart', 'a', function(ev){
ev.preventDefault();
});
~引用~
- 一部の要素には、専用のドラッグ機能が存在します。ドラッグ操作により、データの転送準備が開始されます。
- IMG要素の場合、画像の上にマウスカーソルを重ねて、ドラッグ操作を行います。すると、src プロパティ値のコピーが発生します。
- A要素の場合、アンカーの上にマウスカーソルを重ねて、ドラッグ操作を行います。すると、href プロパティ値のコピーが発生します。
- 選択済みテキストの場合、選択された文字列のコピーが発生します。
①Aにhref属性がなければ、単純にmousedown/mousemoveイベントのみでドラッグできるが
②Aのhrefがあるとmousedown/mousemoveイベントのみドラッグでは挙動が異常になる
③dragstartイベントをキャンセルすれば、hrefがあってもmousedown/mousemoveドラッグできる(ドラッグ終了時にクリックは発生しない)
②Aのhrefがあるとmousedown/mousemoveイベントのみドラッグでは挙動が異常になる
③dragstartイベントをキャンセルすれば、hrefがあってもmousedown/mousemoveドラッグできる(ドラッグ終了時にクリックは発生しない)