在查詢中檢測鼠標按鍵事件

Question

我試圖檢測鼠標按鍵是否已經按下，如果它在元素上移動。 在safari中，如果按下按鈕，則鼠標事件會發生變化。 Firefox不。

這小提琴/片斷更好解釋的那樣： Safari /鉻當滾過框變成藍色（事件= 0），但如果與滑過變紅：按下左按鈕（事件= 1）。 在Firefox中它總是紅色的（event = 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'); 
    } 
});