当用户双击水平列表时,我有一个函数,该元素被移动到另一个div。此无序列表中的一个li标签是文本输入字段。我想仅禁用该特定字段上的双击行为。由于输入字段是ul元素的一部分,因此在双击该文本框时,我似乎找不到阻止双击事件触发的方法。这就是我所拥有的。我接受coffeescript或常规javascript中的答案,感谢js2coffee.org:)
如果双击两次,以下代码会将水平ul元素移动到另一个div并返回原始元素。效果很好。将鼠标悬停在输入字段上时,如何暂时禁用它。
$(".available_product_shipments").on "dblclick", ".product", ->
$(this).appendTo ".product_shipments"
$(".product_shipments").on "dblclick", ".product", ->
$(this).appendTo ".available_product_shipments"
和JS相当:
$(".available_product_shipments").on("dblclick", ".product", function() {
$(this).appendTo(".product_shipments");
});
$(".product_shipments").on("dblclick", ".product", function() {
$(this).appendTo(".available_product_shipments");
});
html的结构如下
<ul>
<li class="product">
<ul>
<li class="avail_qty_field"><input type="text /></li> #Prevent dblclick here
<li>...</li>
<li>...</li>
</ul>
</li>
<li class="product">
<ul>
<li class="avail_qty_field"><input type="text /></li> #Prevent dblclick here
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>
答案 0 :(得分:2)
我不知道如何在咖啡脚本中这样做,但你只需要做
if ($(event.target).is("input")) return;
或类似的东西。
这是非coffescript版本:
$(".available_product_shipments").on("dblclick", ".product", function(e) {
if ($(e.target).is("input")) return;
$(this).appendTo(".product_shipments");
});
$(".product_shipments").on("dblclick", ".product", function(e) {
if ($(e.target).is("input")) return;
$(this).appendTo(".available_product_shipments");
});
这就是它在coffeescript中的样子
$(".available_product_shipments").on "dblclick", ".product", (e) ->
return if $(e.target).is("input")
$(this).appendTo ".product_shipments"
$(".product_shipments").on "dblclick", ".product", (e) ->
return if $(e.target).is("input")
$(this).appendTo ".available_product_shipments"
答案 1 :(得分:2)
试试这个
$(".available_product_shipments").on("dblclick", ".product", function(e) {
if( $(e.target.localName === 'input')) return;
$(this).appendTo(".product_shipments");
});
$(".product_shipments").on("dblclick", ".product", function(e) {
if( $(e.target.localName === 'input')) return;
$(this).appendTo(".available_product_shipments");
});
编辑:更正语法
答案 2 :(得分:0)
我不会在事件发生后对其进行过滤,而是使用“not selector”过滤器对其进行过滤。从下面的例子中,我不是在“text”的输入类型上挂钩事件,而是在“password”类型上。
<强> HTML 强>
<div class="collection">
<input class="product" type="text" />
<input class="product" type="password" />
</div>
<强>咖啡强>
$(".collection").on "dblclick", ".product:not('input[type=text]')", ->
alert "double clicked"
<强>的jsfiddle 强> 在此处查看此操作:http://jsfiddle.net/anAgent/wQsss/