mouseup 和 mousedown 事件之间的冲突？

Question

我制作了一个 table，里面有不同的单元格（input 个元素）：

<?php 
    echo '<table>';
    echo '<tr>';
    echo '<td><input name="test00" value="0"></td>';
    echo '<td><input name="test01" value="1"></td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td><input name="test10" value="2"></td>';
    echo '<td><input name="test11" value="3"></td>';
    echo '</tr>';
?>

并具有以下 jQuery 代码：

$('input[name^="test"]').mousedown(function(event) 
{
    //event.preventDefault();
    var field=$(this);        
    field.css({background : "#BFE7F5"});       
});

$('input[name^="test"]').on( "mouseup", function() 
{
    //var id-cellule;
    //var id-colonne;
    var field=$(this);

    field.css({background : "#AAAAAA"});
});

问题：

当我在单元格外释放鼠标（mouseup 事件）时，此函数仍然在发生 mousedown 事件的单元格上执行。

我想允许用户 select 多个单元格，所以当 mousedown 出现在一个单元格上时，这将是第一个 selected 单元格。然后在 mouseup 上，鼠标指示的单元格应该是最后一个 selected 的单元格。

我把上面的例子做了一个示例table，以便于理解。

我尝试使用 preventDefault()，但是 none 的输入不再是 editable。

$('input[name^="test"]').mousedown(function(event) // Pour tous les input qui changeront
                                   {
  //event.preventDefault();
  var field=$(this);        
  field.css({background : "#BFE7F5"});       
});
$('input[name^="test"]').on( "mouseup", function() // Pour tous les input qui changeront
                            {
  //var id-cellule;
  //var id-colonne;
  var field=$(this);
  field.css({background : "#AAAAAA"});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input name="test00" value="0"></td>
    <td><input name="test01" value="1"></td>
  </tr>
  <tr>
    <td><input name="test10" value="2"></td>
    <td><input name="test11" value="3"></td>
  </tr>

Answer 1

尝试 jquery 的 mouseout 事件。只需将 mouseup 替换为 mouseout。

[代码][已编辑}

$('input').mousedownr(function(event) // Pour tous les input qui changeront
{
    var field_nm=$(this).attr("name");
    //event.preventDefault();
    var field=$(this);        
    field.css({background : "#BFE7F5"});       
});
$('input').on( "mouseup", function() // Pour tous les input qui changeront
{
    var field_nm=$(this).attr("name");
    //var id-cellule;
    //var id-colonne;
    var field=$(this);
    field.css({background : "#AAAAAA"
});

Answer 2

您需要将 mouseup 侦听器附加到 document 以便您可以检测输入的输出 mouseup 然后将 start_input 初始化为白色 :

var start_input;

$('input[name^="test"]').mousedown(function(event){
  var field=$(this);

  field.css({background : "#BFE7F5"});       
  start_input=field;
});

$(document).on( "mouseup", function(e){
  var field=$(e.target);

  if( e.target.tagName=="INPUT" ){
    field.css({background : "#AAAAAA"});
  }else{
    start_input.css({background : "#FFFFFF"});
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input name="test00" value="0"></td>
    <td><input name="test01" value="1"></td>
  </tr>
  <tr>
    <td><input name="test10" value="2"></td>
    <td><input name="test11" value="3"></td>
  </tr>

Answer 3

mouseup 事件的目标是获得焦点的 input 元素，即使您的鼠标位置在另一个元素上也是如此。即使使用事件委托，或通过请求 $(':hover')，您仍将获得具有焦点的 input 元素。

相反，从您悬停的元素的鼠标位置计算，如果它是 input 元素，则执行 CSS 修改：

$('input[name^="test"]').mousedown(function(event) {
    $(this).css({background : "#BFE7F5"});       
});
$('input[name^="test"]').on( "mouseup", function(e) {
    $hoverElem = $(document.elementFromPoint(e.clientX, e.clientY))
        .filter('input[name^="test"]');
    $hoverElem.css({background : "#AAAAAA"})
              .focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input name="test00" value="0"></td>
    <td><input name="test01" value="1"></td>
  </tr>
  <tr>
    <td><input name="test10" value="2"></td>
    <td><input name="test11" value="3"></td>
  </tr>
</table>

Answer 4

所以对于 mouseout 来说，它不是一个好东西。对于第二个提议，我添加了以下内容：

var name= $(this).attr("name"); console.log(姓名);

但名称是我按下鼠标按钮（启动 mousedown 的地方）的单元格的名称。

mouseup 和 mousedown 事件之间的冲突？

Conflict between mouseup and mousedown events?

jquery

focus

jquery-events

问题：