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

【问题标题】：Detect mouse button event on movement in query在查询中检测移动鼠标按钮事件
【发布时间】：2015-03-13 18:17:01
【问题描述】：

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

这个小提琴/sn-p 解释得更好：在 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>

【问题讨论】：

首先，我认为mouseenter 在这种情况下更适合防止冒泡。其次，在触发事件并满足条件时，检查mousedown。
感谢您教我冒泡。

标签： jquery google-chrome firefox safari

【解决方案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>

【讨论】：

【解决方案2】：

一个稍微简单的答案..

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

【讨论】：