Question

我想在按钮内设置一个文本框。我遇到文本框的点击事件时遇到问题 - 每当我点击文本框时，它也会点击按钮并触发按钮的事件。我想将这两个事件分开 - 所以当我点击文本框进行输入时，它不会触发连接到按钮点击的事件。我怎么能做到这一点？

编辑：我尝试过使用stopPropagation和preventDeafult，但按钮事件在到达我的事件之前就会触发。

Answer 1

根据您的要求，此代码将有效...

$('#btn').click(function(){
this.preventDefault();
    alert("wont fire");
});

$('#txt').on('click',function(){
    alert("text is clicked");
});

DEMO看看这个与事件here

之间的区别

Answer 2

也许HTML布局有问题，通过为每个元素提供z-index，这里的工作正常：

HTML：

<div  style="z-index: 2; position:absolute; top:0"> 
   <input id="text" type="text"/>
</div>
<div style="z-index: 1; position:absolute; top:0 ">
   <input id="button" style="width:200px; height:40px; text-align:right" type="Button" value="button"/>
</div>

JS：

$("#text").click(function(){
    alert("text clicked");
});
$("#button").click(function(){
    alert("button clicked");
});

这是live demonstration

按钮内的文本框 - Bootstrap twitter

2 个答案: