JavaScript AddEventListener 异常

Question

目前，这段代码非常适合我:

function click(event){
    var header = document.getElementById('header');
    var text = document.createElement('textarea');
    text.multiline = true;
    text.cols = 30;
    text.rows = 6;
    text.style.cssText = "position: absolute; margin-left:" + event.clientX + "px; margin-top:" + (event.clientY - 50) + "px;";
    header.parentNode.insertBefore(text, header.nextSibling);
}
document.addEventListener("click", click);

但我想知道您是否可以在单击文本区域时阻止它激活。

Answer 1

Test the target-node using event.target.nodeName

function click(event) {
  if (event.target.nodeName.toUpperCase() !== 'TEXTAREA') {
    var header = document.getElementById('header');
    var text = document.createElement('textarea');
    text.multiline = true;
    text.cols = 30;
    text.rows = 6;
    text.style.cssText = "position: absolute; margin-left:" + event.clientX + "px; margin-top:" + (event.clientY - 50) + "px;";
    header.parentNode.insertBefore(text, header.nextSibling);
  }
}
document.addEventListener("click", click);

<header id='header'>Header</header>