如何阻止<input>元素的默认onClick行为？

嘿，这个问题我太熟啦！你要做的就是阻止事件冒泡——简单说就是让点击input的事件“停”在input自己身上，别往上传到父级的div那里。下面给你两种实用的解决办法：

方法一：给input绑定点击事件，直接阻止冒泡 #

你可以给<input id="search">单独加一个点击事件处理函数，在里面调用event.stopPropagation()，就能把事件“拦”在input这里，不让它触发div的点击逻辑。

修改后的完整代码如下：

JavaScript代码 #

document.getElementById("main").onclick = function() { 
    document.getElementById("main").style.backgroundColor = "red"; 
}

// 给input添加阻止冒泡的逻辑
document.getElementById("search").onclick = function(event) {
    event.stopPropagation();
}

CSS代码 #

#main { 
    background-color: blue; 
    padding: 1rem;
    color: #fff;
}

HTML代码 #

<div id="main"> 
    If you click here, change background to red. 
    <input id="search" type="search" value="If you click here, do nothing."> 
</div>

方法二：在div的点击事件里判断触发源 #

另一种思路是在div的点击处理函数里“识别”点击的到底是div本身还是里面的input，如果是input就跳过背景色修改的逻辑。这种方法不需要额外给input加事件，更简洁：

修改后的JavaScript代码：

document.getElementById("main").onclick = function(event) {
    // 判断触发事件的元素不是input时，才执行修改逻辑
    if (event.target.id !== "search") {
        this.style.backgroundColor = "red"; 
    }
}

小知识点补充 #

• event.stopPropagation()：专门用于阻止事件在DOM树中向上冒泡，只会影响事件的传递路径，不会阻止当前元素的默认行为（比如input的输入功能）。
• event.target：指的是触发事件的最底层元素，通过它可以精准判断用户点击的是哪个元素。

内容的提问来源于stack exchange，提问作者Jack