jquery 输入复选框检查了奇怪的行为

Question

我对 jquery 和复选框有一个奇怪的行为。 在我的表格中，我用一些数据构建了一个表格。用户可以单击行或输入复选框以选择行并将它们添加到选择中。 I build this fiddle for example 因此，当您单击行时，就可以了，该行被选中并且我有了我的 ID。但是当您第一次单击输入时，输入会被选中，但是当我们释放按钮时，他会被取消选中。 如果我们再次点击之后，行为是正确的。 我知道我做错了什么，但不知道是什么。 我需要使用 mousedown 事件进行多项选择，并允许用户一键选择多个 id。

_isMouseDown = false;
jQuery(document).on('mousedown',function(event) {
    _isMouseDown = true;
});
jQuery(document).on('mouseup',function(event) {
    _isMouseDown = false;
});
(function($) {
var sTableId = 'lois_server_select';
var aAvailableServerClicked = new Array();
var aServerSelectedClicked = new Array();

$('.lois_server_select tr').hover(
    function () {
       if(_isMouseDown == true){
           //exec onmousedown
           $(this).trigger('mousedown');
       }
   },function (){}
);

//bug with the first click on checkbox unchecke the input 
$('.lois_server_select input').click(function(evt){
    _that = $(this);

    if(_that.closest('tr').hasClass('clicked')){
        _that.prop('checked',true);
    } else {
        _that.prop('checked',false);
    }
});

$('.lois_server_select tr').bind('mousedown',function(evt) {
    console.log('this',this);
    var _that = $(this);
    var _checkbox = $(':checkbox',_that);
    console.log('checkbox',_checkbox);
    console.log('start checked:',_checkbox.attr('checked'));
    if(_checkbox.val() == undefined) return;

    console.log('checked:',_checkbox.prop('checked'));
    if(_that.hasClass('clicked')){
        //remove class
        _that.removeClass('clicked');
        //uncheck checkbox
        _checkbox.prop('checked',false);
        //remove to aAvailableServerClicked
        if(sTableId == 'lois_server_select'){
            aAvailableServerClicked.splice($.inArray(_checkbox.val(), aAvailableServerClicked),1);
        } else {
            aServerSelectedClicked.splice($.inArray(_checkbox.val(), aServerSelectedClicked),1);
        }

    } else {
        //add selected class
        _that.addClass('clicked');
        //check checkbox

        _checkbox.prop('checked',true);

        //add to aAvailableServerClicked
        if(sTableId == 'lois_server_select'){
            aAvailableServerClicked.push(_checkbox.val());
        } else {
            aServerSelectedClicked.push(_checkbox.val());
        }
    }
    console.log('end checked:',_checkbox.attr('checked'));
    //evt.stopPropagation();
});

})(jQuery);

感谢您的帮助。

Answer 1

在阅读了一些其他堆栈帖子（Detect left mouse button press、Check if mouse button is down while hovering?）之后，检测按钮看起来有点棘手。以下内容在 Chrome 中对我有用。根据帖子，它可能（应该）也适用于其他浏览器。

$(function() {
  function detectLeftButton(event) {
    if ('buttons' in event && event.buttons) {
      return event.buttons === 1;
    } else if ('which' in event) {
      return event.which === 1;
    } else {
      return event.button === 1;
    }
  }
  $('input[type=checkbox]').hover(function(ev) { 
    console.log(ev)
    if (detectLeftButton(ev)) {
      console.log("left button is down")
      $(ev.target).trigger('click')
    }
  }, function() { });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cb1">cb1</label><input id="cb1" name="cb1" type="checkbox"/>
<br/>
<label for="cb2">cb2</label><input id="cb2" name="cb2" type="checkbox"/>
<br/>
<label for="cb3">cb3</label><input id="cb3" name="cb3" type="checkbox"/>
<br/>
<label for="cb4">cb4</label><input id="cb4" name="cb4" type="checkbox"/>
<br/>

这可能有助于简化您的代码，因为您实际上只需要 hover 回调中的辅助方法。您不需要跟踪鼠标的状态，因为 Event 具有该信息（在 buttons 或 which 下）。

如您所见，我编写了一些与您的相似但经过简化的 HTML。希望这将映射到您的用例。

我也没有添加逻辑来管理哪些服务器被选中，但它看起来像是一个辅助方法，类似于

function getAvailableServers(table) {
  return $(table).find(':checked')
});

可用于抓取选定的项目。您可能需要通过 map 函数运行它以从选择中获取值，但只有在您实际需要服务器列表时才能调用帮助程序。