我在这里遇到了一个奇怪的问题，我有一个 div 附加了一个点击事件，还有一个 input 有 on-blur 事件和 button 附加了点击事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div onClick='div()'>
<input onBlur='input()' />
<button onClick='button(event)'> ABCD </button>
</div>
</body>
</html>
以下是单击按钮时调用的函数。
function input(event){
console.log('input')
event.stopPropagation();
}
function button(event) {
console.log('button')
event.stopPropagation();
}
function div(){
console.log('div')
}
我在这里遇到的问题是，如果我在输入框内单击然后它会记录 div 函数内的内容，我尝试了 event.stopPropagation()，但它似乎不起作用，有什么办法让它起作用吗？即 - 在单击输入时不记录 div 中的内容。
这是一个Bin同样。
最佳答案
您必须为输入点击设置停止传播而不是 blur ， 所以 div 点击不会被传播:
看下面的片段
function input(){
console.log('input')
event.stopPropagation();
}
function inputStopPropagation() {
event.stopPropagation();
}
function button(event) {
console.log('button')
event.stopPropagation();
}
function div(){
event.stopPropagation();
console.log('div')
}<div onClick='div()' style="padding:5px; background :green">
<input onBlur='input()' onClick='inputStopPropagation()' />
<button onClick='button(event)'> ABCD </button>
</div>关于javascript - 通过单击 input 元素内部来停止事件传播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58077147/