Question

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

这个小提琴/片段解释得更好：在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');
    }
});

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

2 个答案: