在查询中移动时检测鼠标按钮事件

Question

我正在尝试检测鼠标按钮在元素上移动时是否已被按下。在 Safari 中，如果按下按钮，鼠标事件会发生变化。 Firefox 没有。

这个 fiddle/snippet 解释得更好：在 Safari/Chrome 中，滚动时框变为蓝色（事件 = 0），但如果滚动则变为红色：按下左按钮（事件 = 1）。在 Firefox 中它总是红色的（事件=1）。我有点认为 Firefox 是正确的，因为事件是在鼠标悬停时触发的。

问题是我需要 Firefox 表现得像 Safari/Chrome!

http://jsfiddle.net/robertireland/5w5rxrhy/

$('td').mouseover(function(e) {
    
    
    $(this).removeClass();
    $('#button').text(e.which);
 
    if(e.which==0){
        $(this).addClass('bgblue');
    }
    
    if(e.which==1){
        $(this).addClass('bgred');
    }
});

#output {
    margin-top: 10px;
    border: 1px solid black;
    background: #eee;  
}
td{padding:10px; border:1px dotted #ccc; cursor:pointer;}
.bgred{background-color:red;}
.bgblue{background-color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    
</table>
<div id="output">Button pressed: <span id="button"></span></div>

Answer 1

也许您可以只跟踪指示鼠标是否按下的标志，并在 mouseover 事件期间检查它：

var isMouseDown = false;

$('body').mousedown(function() {
    isMouseDown = true;
}).mouseup(function() {
    isMouseDown = false;  
});

$('td').mouseover(function(e) {
    
    $(this).removeClass();
    $('#button').text(e.which);
 
    if (isMouseDown){
        $(this).addClass('bgred');
    } else {
        $(this).addClass('bgblue');
    }
});

#output {
    margin-top: 10px;
    border: 1px solid black;
    background: #eee;  
}
td{padding:10px; border:1px dotted #ccc; cursor:pointer;}
.bgred{background-color:red;}
.bgblue{background-color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    
</table>
<div id="output">Button pressed: <span id="button"></span></div>

Answer 2

稍微简单一点的答案..

$('td').mouseenter(function(e) {
    $(this).removeClass();
    $('#button').text(e.which);
    if( e.which==1 && $('body').mousedown() ){
        $(this).addClass('bgred');
    } else {
        $(this).addClass('bgblue');
    }
});

在查询中移动时检测鼠标按钮事件

Detect mouse button event on movement in query

safari

firefox

jquery

google-chrome