为什么在几种情况下中键不会触发“点击”？ [英] Why does middle-click not trigger 'click' in several cases?

问题描述

以下是 JSFiddle 我看到的行为，与中键和在Chrome和FF中点击事件。
$ b

'click'kinda sorta works

方法1 ：将点击处理程序直接绑定到 a 元素和点击鼠标中键会在Chrome中触发处理程序，但不会在FF中触发。

$ $ $''code> $（'div a'）。on（'click '，function（ev）{
//中间点击触发这个处理程序
}）;

方法2 ：绑定委托 / code>处理程序包含一个或多个 a 的 div 。中点击不会在Chrome或FF中触发此处理程序。



  $（'div'）。 on（'click'，'a'，function（ev）{
 //中间点击不会触发这个处理程序
}）; 
  

如果div开始是空的，并且 a 元素在稍后由AJAX调用填充，或者由于某些用户输入而填充。



'mouseup'works

使用 mouseup 点击会导致方法1和方法2在两个浏览器中都能正常工作。

  //方法1 w / mouseup 
 $（'div a'）。on（'mouseup'，function（ev）{
 //中点击** FF 
}）; 
 $ b $ //方法2 w / mouseup 
 $（'div'）。on（'mouseup'，'a'，function（ev）{
 //中点击* *不会触发这个处理程序在Chrome和FF 
））; 
  

以下是 JSFiddle 与 mouseup 。

这很有趣，在某些情况下可能会有用，因为 mouseup 几乎是点击。但是 mouseup 不是 点击，而且我在点击。我不想创建一个hacky mousedown; setTimeout的; mouseup 模拟点击。

我很确定答案是nope ，但有没有一个跨浏览器的方式来导致中点击触发点击处理程序？如果不是的话，原因是什么？

解决方案

点击事件通常是为鼠标左键触发的，浏览器，点击事件可能会或可能不会发生的权利和/或中间按钮。

在Internet Explorer和Firefox中，点击事件并不是针对右侧或中间按钮触发的。

因此，我们不能可靠地在事件处理程序的中间或右键上使用click事件。

相反，为了区分鼠标按钮，我们必须使用mousedown和mouseup事件作为大多数浏览器都会触发mousedown和mouseup事件来处理任何鼠标按键。 Firefox和Chrome中的

event.which 应该包含一个数字，指示按下了什么鼠标按钮（剩下1个， 2是中间的，3是正确的）。

另一方面，在Internet Explorer中， event.button 表示什么点击鼠标左键（1左边，4中间，2右边）;

event.button 应该也可以在Firefox和其他浏览器上工作，但是数字可能会略有不同（0左边，1中间，2是正确的）。

通常做这样的事情：

  document.onmousedown = function（e）{
 var evt = e == null ？事件：e; $（b 
 $ b）if（evt.which）{// e.which，使用2作为中间按钮
 if（evt.which === 2）{
 // middle button点击
 
} else if（evt.button）{// if if e.button，use 4 
 if（evt.button === 4）{
 //点击中间按钮
} 
} 
} 
  

event.which ，您只需要在jQuery事件处理程序中使用它，就这样做：

<$ p $（
）$（'div a'）。on（'mousedown'，function（e）{
if（e.which === 2）{
// middle按钮点击
}
}）;


换句话说，你不能使用onclick事件，所以为了模拟它，你可以同时使用mousedown你可以添加一个定时器来限制mousedown和mouseup事件之间允许的时间，甚至可以使用mousemove处理程序来限制mousedown和鼠标事件，并使事件处理程序不会触发，如果鼠标指针移动超过十个像素等可能性几乎是无止境的，所以这应该不是一个问题。

< （
mousedown：function（e）{
if（e.which === 2）{$ b $ {code> $（'＃test'）。 $ b $（this）.data（'down'，true）;
}
}，
mouseup：function（e）{
if（e.which === 2& $（this）.data（'down'））{
alert（'middle button clicked'）;
$（this）.data（'down'，false）;
}
}
}）;

Here's a JSFiddle of the behavior I'm seeing, relating to middle-click and the click event in Chrome and FF.

'click' kinda sorta works

Approach 1: Bind a click handler directly to an a element and a middle-click will trigger the handler in Chrome but not in FF.

$('div a').on('click', function(ev) {
    // middle click triggers this handler
});

Approach 2: Bind a delegated click handler to a div which contains one or more a. Middle click will not trigger this handler in Chrome or FF.

$('div').on('click', 'a', function(ev) {
    // middle click doesn't trigger this handler
});

This approach is extremely valuable if the div starts out empty and the a elements are filled in later by an AJAX call, or as a result of some user input.

'mouseup' works

Using mouseup instead of click causes both approach 1 and 2 to work in both browsers.

// Approach 1 w/ mouseup
$('div a').on('mouseup', function(ev) {
    // middle click **does** trigger this handler in Chrome and FF
});

// Approach 2 w/ mouseup
$('div').on('mouseup', 'a', function(ev) {
    // middle click **does** trigger this handler in Chrome and FF
});

Here's the JSFiddle with mouseup.

This is interesting and might be useful in some cases, because mouseup is almost click. But mouseup isn't click, and I'm after the behavior of click. I do not want to create a hacky mousedown; setTimeout; mouseup simulation of click.

I'm pretty sure the answer is "nope", but is there a cross-browser way to cause middle-click to trigger click handlers? If not, what are the reasons why?

解决方案

The click event is generally fired for the left mouse button, however, depending on the browser, the click event may or may not occur for the right and/or middle button.

In Internet Explorer and Firefox the click event is not fired for the right or middle buttons.

Therefore, we cannot reliably use the click event for event handlers on the middle or right button.

Instead, to distinguish between the mouse buttons we have to use the mousedown and mouseup events as most browsers do fire mousedown and mouseup events for any mouse button.

in Firefox and Chrome event.which should contain a number indicating what mouse button was pressed (1 is left, 2 is middle, 3 is right).

In Internet Explorer on the other hand, event.button indicates what mouse button was clicked (1 is left, 4 is middle, 2 is right);

event.button should also work in Firefox and other browsers, but the numbers can be slightly different (0 is left, 1 is middle, 2 is right).

So to put that together we usually do something like this :

document.onmousedown = function(e) {
    var evt = e==null ? event : e;

    if (evt.which) { // if e.which, use 2 for middle button
        if (evt.which === 2) {
            // middle button clicked
        }
    } else if (evt.button) { // and if e.button, use 4
        if (evt.button === 4) {
            // middle button clicked
        }
    }
}

As jQuery normalizes event.which, you should only have to use that in jQuery event handlers, and as such be doing:

$('div a').on('mousedown', function(e) {
    if (e.which === 2) {
        // middle button clicked           
    }
});

In other words you can't use the onclick event, so to simulate it you can use both mousedown and mouseup.

You can add a timer to limit the time allowed between the mousedown and mouseup event, or even throw in a mousemove handler to limit the movement between a mousedown and mouseup event, and make the event handler not fire if the mouse pointer moved more than ten pixels etc. the possibilites are almost endless, so that shouldn't really be an issue.

$('#test').on({
    mousedown: function(e) {
        if (e.which === 2) {
            $(this).data('down', true);
        }
    },
    mouseup: function(e) {
        if (e.which === 2 && $(this).data('down')) {
            alert('middle button clicked');
            $(this).data('down', false);
        }
    }
});

这篇关于为什么在几种情况下中键不会触发“点击”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！