24

Chromeの問題だけかどうかはわかりませんが（今は確認できません）、次のコードを試してみましょう。ここでは、2つのイベントをいくつかの要素にバインドしています。

$("div").on({
    mousemove: function(e) {
        console.log("move");
    },
    click: function(e) {
        console.log("click");
    }
});

要素をクリックしようとすると、何らかの理由mousemoveでクリック直後にイベントが発生することがわかります。したがって、コンソールには次のようになります。

>> ...
>> click
>> move

デモ：http： //jsfiddle.net/gKqVt/

mousedownとmouseupイベントは同じシナリオで機能することに注意してください。

click私は同じ問題についてSOについて多くの質問を見ましたが、（私の検索では）イベントのみを発生させるために何をすべきかを簡単に考えたものはありませんでした。

4

6 に答える 6

9

Mousemoveは、Chromeにあるすべてのマウスアクションにバインドされているように見えるため、マウスが「移動」するたびにマウスの位置を保存し、前のマウスの位置と照合して、実際に「移動」したことを確認します。

var currentPos=[];
$("div").on({
    mousemove: function(e) {
        if (e.pageX!==currentPos[0] && e.pageY !==currentPos[1]){
            currentPos=[e.pageX,e.pageY];
        this.innerHTML = "Event: " + e.type;
        console.log("move");
        }
    },
    click: function(e) {
        this.innerHTML = "Event: " + e.type;
        console.log("click");
    }
});

デモ| ソース

于 2013-01-26T16:35:00.443 に答える
7

これは、11月に最初に報告されたChromeのバグのようで、未解決のままです。

クロム問題161464

特にChromeをターゲットにしている場合は、イベントのタイムスタンプを比較して回避する価値があるかもしれません（@ExplosionPillsが提案した最小のデルタ時間を使用します。ただし、一般的な動作を探している場合は、それらを次のように扱う方がよいようです。個別のイベント。Chrome以外のすべてのブラウザー（およびSafari？バグはwebkit-coreとしてラベル付けされている）では、実際には個別のイベントになります。

于 2013-01-26T16:27:36.713 に答える
3

この動作は奇妙で、普遍的には発生しないようです（Chrome / IEで発生しますが、FFXでは発生しません）。本当の答えがないので、正解は得られていないと思います。

クリックアクションによってマウスがごくわずかに動かされる可能性がありますが、おそらくそうではありません。ブラウザの癖かもしれません。stopImmediatePropagationinは発砲clickを止めないので、これらは同じイベントではないようです。mousemove要素にフォーカスを合わせてキーボードボタンを押すと、実際にはトリガーclickされ、のみ clickがトリガーされます。

これはとても風変わりなので、それに対処する唯一の方法は時間であるように思われます。これと同じくらい多くの問題がありますが、 click1ミリ秒前 mousemoveに発生することに気付いたので、クリックタイムスタンプ+ 2（または10）を比較することで近づけることができます。

mousemove: function(e) {
    if ($(this).data('lastClick') + 10 < e.timeStamp) {

http://jsfiddle.net/gKqVt/3/

ただし、これは非常に具体的です。非常に頻繁に発生するため、mousemoveですぐに発生する動作がないことを検討する必要があります。

于 2013-01-26T16:23:43.730 に答える
3

マウスが実際に動いたか、以下のように動かなかったかを確認しないのはなぜですか。

function onMouseDown (e) {
    mouseDown = { x: e.clientX, y: e.clientY };
    console.log("click");
}

function onMouseMove (e) {
    //To check that did mouse really move or not
    if ( e.clientX !== mouseDown.x || e.clientY !== mouseDown.y) {
        console.log("move");
    }
}

フィドルデモ

（私はそれがすべてのブラウザでまだ正しいと思います）

于 2015-07-05T03:24:56.200 に答える
0 

var a,b,c,d;
  $(".prd img").on({
	mousedown: function(e){
	  a= e.clientX, b= e.clientY;
	},
	mouseup: function(e){
	  c= e.clientX, d= e.clientY;
	  if(a==c&&b==d){
	    console.log('clicked');
	  }
	}
  });

これを試して。これは正しく機能します。

于 2016-08-04T09:38:56.360 に答える
0

この動作に気付いたのは、マウスダウンとマウスアップをドラッグせずにマウスダウンとマウスアップを区別する必要がある場合と、マウスダウンとマウスアップをドラッグして区別する必要がある場合です。使用したソリューションは次のとおりです。

var div = $('#clickablediv');
var mouseDown = false;
var isDragging = 0;
div.mousedown(function () {
   isDragging = false;
       mouseDown = true;
   }).mousemove(function () {
       if (mouseDown) isDragging++;
   }).mouseup(function () {
       mouseDown = false;
       var wasDragging = isDragging;
       isDragging = 0;
       if (!wasDragging || wasDragging<=1) {
           console.log('there was no dragging');
       }
   });

試してみると、定期的にクリックするだけで「isDragging」が3になりますが、それほど頻繁ではないことに気付きました。

于 2016-11-27T12:51:26.277 に答える