Question

HTML：

<div class="infoBox2 blackBoxHover">
    <h2>direct Link: </h2> 
    <input class="fileInput" type="text" id="directlinkText" name="directlinkText" />
</div>

JAVASCRIPT：

$('#directlinkText').parent('div').click(function () {
    alert('test');
});

当我点击div上的任何地方时，我想看看测试除非我点击其中的输入。现在单击文本框输入也会触发div的单击事件

我该如何解决这个问题？

Answer 1

$('#directlinkText').parent('div').click(function (e) {
        if(e.target.id === "directlinkText"){
            return;
        }
        alert('test');
 });

Answer 2

这是因为您的输入位于div内。将事件附加到文本框，然后停止事件传播。

$('#directlinkText').click(function(event) {
  event.stopPropagation();
});

这将停止事件传播。

Answer 3

当click事件来自input这样的元素时，您可以停止传播：

$('#directlinkText').click(false).parent('div').click(function () {
    alert('test');
});

这会直接在false元素上返回点击事件的#directlinkText。在jQuery事件处理程序中与调用event.preventDefault()和event.stopPropagation()相同。如果您只是想停止传播而不是阻止默认行为，那么您可以使用：

$('#directlinkText').click(function (event) {
    event.stopPropagation();
}).parent('div').click(function () {
    alert('test');
});

jquery点击绑定div效果文本框驻留在其中

3 个答案: