如果按钮按下，Javascript "mouseover"不会被触发 (Firefox)

Question

我在某些输入字段上有一个“鼠标悬停”事件。如果按下鼠标按钮，则在 Firefox 上不会触发此事件。这是一个错误吗？ (我使用的是 Firefox 50.1.0)。

$(function() {
    $('#container').on('mouseover','.myclass', tdMouseover);     
});
    
    
function tdMouseover(e) {
    console.log("mouseover");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <input id='editableDiv1' class="myclass"></input>
  <input id='editableDiv2' class="myclass"></input>
  <input id='editableDiv3' class="myclass"></input>
  <input id='editableDiv4' class="myclass"></input>
</div>

Answer 1

这里建议解决方案 Firefox: mouseover doesn't work while mouse button is pressed

It is not working in Firefox because the textbox is being 'dragged' in the browser, like how you can highlight text and drag and drop it into another text field.

You can disable this functionality with css: user-drag: none; and user-select: none; which fixes your problem.

$(function() {
    $('#container').on('mouseover','.myclass', tdMouseover);     
});
    
    
function tdMouseover(e) {
    console.log("mouseover");
}

input{
  user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <input id='editableDiv1' class="myclass"></input>
  <input id='editableDiv2' class="myclass"></input>
  <input id='editableDiv3' class="myclass"></input>
  <input id='editableDiv4' class="myclass"></input>
</div>