Question

我在按钮内输入了内容。单击输入时是否可以防止触发按钮单击事件？ preventDefault()不起作用。

<button class="btn_size">
<input type="text" name="size_y" style="width:60px;" />
<font style="font-weight:normal;">x</font>
<input type="text" name="size_y" style="width:60px;" />
Set size
</button>

http://jsfiddle.net/XeYTJ/

stopPropagation()也是如此。它并没有阻止它：

http://jsfiddle.net/XeYTJ/2/

几年前我遇到了类似的问题。我希望能够禁用单个手风琴按钮。我编写了一个能够在任何其他事件的顶部绑定事件的函数，它只是检查点击按钮是否有.disabled类。如果是，它只是return false;。那很有效。但只有在jQuery 1.8出现之前。在访问事件数据时发生了一些变化，它不再起作用了。

这个问题似乎很容易，所以我知道我可能会得到很多-1票。但请在投票前检查您是否能够解决问题。

Answer 1

您可以分两步完成工作：

在输入中使用与选择器中相同的名称。您有两个输入name="size_y"，但您正在使用选择器$('input[name="y_size"]')和$('input[name="x_size"]')。看到区别？

在输入前的按钮上添加点击事件：

$('.btn_size').button({icons: { primary: "ui-icon-arrow-4-diag" }}).click(function(){
    console.log('clicked');
}); 

$('input[name="size_x"]').click(function(e){
    console.log('x');
    e.stopPropagation();
});
$('input[name="size_y"]').click(function(e){
    console.log('y');
    e.stopPropagation();
});

请参阅fiddle。

如果这不起作用，您可以尝试将<button>更改为<div>并使用.button()来设置样式。

内部按钮的jQuery UI输入 - 如何防止触发点击事件？

1 个答案: