Javascript "mouseover" 按钮按下时不触发 (Firefox)

Question

我在某些输入字段上有一个 "mouseover" 事件。如果按下鼠标按钮，此事件在 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

这里推荐解决方案

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>

Javascript "mouseover" 按钮按下时不触发 (Firefox)

Javascript "mouseover" not fired if button is down (Firefox)

javascript

firefox

mouseover