通过单击 input 元素内部来停止事件传播

Question

我在这里遇到了一个奇怪的问题，我有一个 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。

Answer 1

您必须为输入点击而不是模糊设置停止传播，所以 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>

通过单击 input 元素内部来停止事件传播

Stop event propagation by clicking inside input element

javascript

event-listener

dom-events