侦听器单击任何元素并读取特定的 HTML-5 自定义属性(如果存在）

Listener for click on ANY element and read particular HTML-5 custom attribute when present?

本文关键字：自定义属性 HTML-5 如果 存在 任何 单击 元素 读取 侦听器      更新时间：2023-09-26

我想检测何时单击任何元素并检测该元素是否具有特定的 HTML-5 自定义属性（数据测试）。如果它确实具有该特定自定义属性，则从该元素读取 HTML-5 自定义属性。需要这个才能在IE8中工作，而不是使用jQuery。不确定我会怎么做？对于单个页面上的许多元素，自定义属性将具有相同的名称（不唯一）。

添加了下面的代码，当您单击一个元素时，它将获取元素的数据属性并打印数据属性（如果存在）。

.HTML 

<div class="data" data-number="1" data-phone="12314" data-manager="Rex">Click one</div>
<div class="data" data-number="2" data-address="New York">Click two</div>
<div class="data">Click three</div>
<h2>Data attributes will be listed below if it exists</h2>
<div id="result"></div>

.JS

 var el = document.getElementsByClassName("data");
  for(var i= 0; i< el.length; i++){
    el[i].addEventListener("click", function (event) {     
      var div = document.createElement('div');
      for (var key in this.dataset) {
        var obj = this.dataset[key];
        var elem = document.getElementById('result');
        var span = document.createElement('span');
        div.appendChild(span);
        div.className = "block";
        span.innerHTML = "data[" + key + "] = " + obj + "&nbsp;&nbsp;&nbsp;";
        elem.appendChild(div);
   }
  }); 
 }

演示小提琴

更新

addEventListener在IE8中不起作用，也document.getElementsByClassName和dataset。您需要为 IE 提供不同的逻辑。

if (window.attachEvent && !window.addEventListener) {
    var el = document.querySelectorAll('.data');
    for (var i = 0; i < el.length; i++) {
        el[i].attachEvent("onclick", function (event) {
            elem = window.event.srcElement.attributes;
            var elem;
            var div = document.createElement('div');
            var element = document.getElementById('result');
            for (var j = 0; j < elem.length; j++) {
                //console.log("node:", elem.item(j).nodeName);
                var str = elem.item(j).nodeName;
                var span = document.createElement('span');
                div.appendChild(span);
                // console.log(str.substring(0, 4));
                if (str.substring(0, 4) == "data") {
                    span.innerHTML = "data[" + elem.item(j).nodeName + "] = " + elem.item(j).value + "&nbsp;&nbsp;&nbsp;";
                } else if (j == (elem.length - 1)) {
                    span.innerHTML = "No data attributes found";
                }
            }
            div.className = "block";
            element.appendChild(div);
        });
    }
} else {
    console.log("in");
    var el = document.getElementsByClassName("data");
    console.log(el);
    for (var i = 0; i < el.length; i++) {
        el[i].addEventListener("click", function (event) {
            var div = document.createElement('div');
            var element = document.getElementById('result');
            console.log(this.dataset);
            if (Object.keys(this.dataset).length != 0) {
                for (var key in this.dataset) {
                    var obj = this.dataset[key];

                    var span = document.createElement('span');
                    div.appendChild(span);
                    div.className = "block";
                    span.innerHTML = "data[" + key + "] = " + obj + "&nbsp;&nbsp;&nbsp;";
                    element.appendChild(div);
                }
            } else {
                var span = document.createElement('span');
                div.appendChild(span);
                div.className = "block";
                span.innerHTML = "No data attributes found.";
                element.appendChild(div);
            }

        });
    }
}

更新的小提琴

注意：上面的代码在IE8中有效，但在IE 9中无效，因为它进入IE9的else块，并且在IE中无法识别数据集。 希望你现在明白了继续前进的想法。

像click这样的事件会在DOM中冒泡。您可以在document上捕获它们，并从event对象本身获取触发事件的元素：

document.addEventListener('click', function (event) {
    var customAttrValue = event.target.getAttribute('data-test');
    // ... (do your thing with the value)
});

要支持 IE8，您需要将其扩展到：

function doSomethingOnClick (event) {
    var customAttrValue = event.target.getAttribute('data-test');
    // ... (do your thing with the value)
}
if (document.addEventListener) {
    document.addEventListener('click', doSomethingOnClick);
} else {
    document.attachEvent('click', doSomethingOnClick);
}
相关文章：