Question

我目前正在开发一个期权选择器。现在有一个新的要求是可以配置选项。虽然这不是一个大问题，选项选择器让我很麻烦：

双击某个项目时，将选择/取消选择该项目。如果选中，将显示配置选项。虽然这对于像复选框这样的标准HTML元素可以正常工作，但我无法像jQuery微调器那样使用它。

在下面的代码片段中，我模拟了取消选择elment将其变为红色的效果。因此，继续尝试通过向上+向下按钮更改微调器值，而不会使标签变为红色。

正如您所看到的，这可以在复选框上正常工作，可以根据需要更改选中/取消选中，而不会将标签变为红色。然而，如果您点击太快，旋转器会将标签变为红色，从而触发双击事件。

如何正确捕获doubleclick事件？

＆＃13;

$(window).load(function(){
  var $item = $(".item");
  
  $item.disableSelection()
  $item.on("dblclick",function(){
    $(this).addClass("marker");
  });
  $item.find("input").on("dblclick",function(e){
    e.stopPropagation();
  });

  $("input[type='text']").spinner({min:1});
  $("input[type='button']").on("click",function(){
    $(".marker").removeClass("marker");
  });
});

＆＃13;

.marker {
  color:red;
}
.item {
  padding:10px;
  margin:10px;
  border:1px solid #ccc;
}
input[type='text'] {
  width:30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  
<div class="item"><input type="text" value="1"> some labeling text</div>
<div class="item"><input type="checkbox"> some labeling text </div>
<div class="item"><input type="checkbox"> some labeling text </div>

<input type="button" value="reset">

＆＃13;

Answer 1

好的，我自己想出来了，

$item.find("input, span:has(input)").on("dblclick",function(e){
    e.stopPropagation();
});

成功了，因为问题是由jQuery添加的包装器

jQuery Spinner拦截双击事件

1 个答案: