Question

按钮

我想让它与像这样的事件监听器一起工作：

＆＃13;

document.body.addEventListener('click', function(e) {
console.log(e.target);
    if (e.target.hasAttribute('data-a-target="popout-chat-button"')) {
            console.log('popout button');
    }
});

＆＃13;

<button data-a-target="popout-chat-button" data-test-selector="popout-button">Popout</button>

＆＃13;

我无法使用hasAttribute检查值，这样做的最佳方法是什么。

Answer 1

使用e.target.getAttribute获取目标元素的属性值。然后将其与if条件中您期望的属性值进行比较：

document.body.addEventListener('click', function(e){
    console.log(e.target);
    if(e.target.getAttribute('data-a-target') === "popout-chat-button"){
        console.log('popout button');
    }
});

<button data-a-target="popout-chat-button" data-test-selector="popout-button">Popout</button>

getAttribute（）方法返回具有指定名称的属性的值。

<强>语法

element.getAttribute（的AttributeName）

Answer 2

您可以使用getAttribute功能。如果存在属性，则返回该属性的值，否则返回null。

if(e.target.getAttribute("data-a-target") === "popout-chat-button") {
     // attribute exists and value is equal to what you want...
}

Answer 3

您可以使用：

.dataset：HTMLElement.dataset属性允许在读取和写入模式下访问元素上设置的所有自定义数据属性（data- *），无论是在HTML中还是在DOM中。 ...

而不是：

e.target.hasAttribute('data-a-target="popout-chat-button"')

你可以简单地写一下：

e.target.dataset.aTarget == "popout-chat-button"

＆＃13;

document.body.addEventListener('click', function(e){
  console.log(e.target.dataset.aTarget);

  if(e.target.dataset.aTarget == "popout-chat-button"){
      console.log('popout button');
  }
});

＆＃13;

<button data-a-target="popout-chat-button" data-test-selector="popout-button">Popout</button>

＆＃13;

Javascript - 单击时，检查元素是否具有值的属性

3 个答案: