Question

我在其中创建了一个包含不同单元格（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事件的单元格上执行此功能。

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

我使用示例表制作了上述示例，以便于理解。

我尝试使用preventDefault()，但之后没有任何输入可以编辑。

＆＃13;

$('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"});

});

＆＃13;

<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>

＆＃13;

Answer 1

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

[代码] [EDITED}

$('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事件的目标是具有焦点的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 3

您需要将mouseup个列表附加到document，以便您可以检测到输入mouseup，然后将start_input初始化为白色：

＆＃13;

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"});
  }
});

＆＃13;

<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>

＆＃13;

Answer 4

因此对于mouseout来说，它不是好的。对于第二个命题，我添加了以下内容：

var name = $（this）.attr（＆＃34; name＆＃34;）; 的console.log（名称）;

但名称是我按下鼠标按钮的单元格的名称（我在那里发布了mousedown）。

mouseup和mousedown事件之间的冲突？

问题：

4 个答案: