正在检测在javascript中单击了哪个节点

Detecting which node was clicked in javascript

本文关键字：节点 检测 javascript 单击      更新时间：2023-09-26

我标记了几个跨度。

<span class="viewEdit">View and edit class one.</span>
<span class="viewEdit">View and edit class two.</span>
<span class="viewEdit">View and edit class three.</span>
<span class="viewEdit">View and edit class four.</span>
<span class="viewEdit">View and edit class five.</span>

我想创建一个函数，添加一个"点击"事件，检测哪个跨度被点击。也就是说，如果第一个是先点击的，它会返回"0"，第二个是"1"。。。等

我意识到我可以使用

document.getElementByClassName("viewEdit)

创建一个数组，但我不知道如何检测哪个数组被点击了。

我试着在这里研究这个问题，但怀疑我说错了，因为我什么都找不到。如果这是对其他地方回答的类似问题的重新拼凑，我们深表歉意。

将向处理程序传递一个事件对象。

function myHandler(event) {
  var el = event.target;
  // Use el here
}

event.target将保留已单击的节点。

jsFiddle Demo

为每个元素附加一个单击处理程序。单击时，让回调引用导致处理程序启动的元素，然后在那里推断索引相对于其他元素的内容。

在事件处理程序内部，this将引用引发事件的元素。

为了实现这一点，您可以使用类名迭代元素集

var els = document.getElementsByClassName("viewEdit");
var elClicked = {};//a public variable in case you wish to use it. the requirements for storage was vague
for( var i = 0; i < els.length; i++ ){

然后在迭代内部，分配一个事件处理程序，并存储所使用的索引，这样您就可以知道单击了什么数字（这需要一个闭包）。

for( var i = 0; i < els.length; i++ ){
 (function(local){
  els[i].onclick = function(){
   elClicked.element = this;
   elClicked.text = this.innerText;
   elClicked.index = local;
  };
 })(i)
}

因此，这将使您能够在集合中找到单击项的索引。

var elements = document.getElementsByClassName("viewEdit");
for (var i = 0; i < elements.length; i++) {
    (function (index) {
        elements[index].addEventListener("click", function () {
            for (var x = 0; x < elements.length; x++) {
                if (elements[x] === this) alert(x);
            }
        }, false);
    })(i);
}

这很快，但应该按照你目前的要求。。。给你一把小提琴。

获取span元素的父节点，然后添加事件处理程序的最简单方法
实时演示

var eles = document.getElementsByClassName("viewEdit");
eles[0].parentNode.addEventListener("click", function (e) {
    // if (e.target.classList.contains("viewEdit")) {
    if (e.target.nodeName.toLowerCase() === "span") {
        alert([].indexOf.call(eles, e.target));
    }
}, false);

您可以向document.body添加一个点击事件侦听器，它将捕获所有点击，然后根据标记类型和元素类进行筛选。像这样的东西。

Javascript

/*jslint maxerr: 50, indent: 4, browser: true */
(function () {
    "use strict";
    function addEvent(elem, event, fn) {
        if (typeof elem === "string") {
            elem = document.getElementById(elem);
        }
        function listenHandler(e) {
            var ret = fn.apply(null, arguments);
            if (ret === false) {
                e.stopPropagation();
                e.preventDefault();
            }
            return ret;
        }
        function attachHandler() {
            window.event.target = window.event.srcElement;
            var ret = fn.call(elem, window.event);
            if (ret === false) {
                window.event.returnValue = false;
                window.event.cancelBubble = true;
            }
            return ret;
        }
        if (elem.addEventListener) {
            elem.addEventListener(event, listenHandler, false);
        } else {
            elem.attachEvent("on" + event, attachHandler);
        }
    }
    function whatClicked(e) {
        var target = e.target;
        if (target.tagName.toUpperCase() === "SPAN" && /(^| )viewEdit( |$)/.test(target.className)) {
            console.log(target);
        }
    }
    addEvent(document.body, "click", whatClicked);
}());

在jsfiddle 上

<span class="viewEdit" onclick:"fn(this)">View and edit class one.</span>
<span class="viewEdit" onclick:"fn(this)">View and edit class two.</span>
<span class="viewEdit" onclick:"fn(this)">View and edit class three.</span>
<span class="viewEdit" onclick:"fn(this)">View and edit class four.</span>
<span class="viewEdit" onclick:"fn(this)">View and edit class five.</span>
<script type="text/javascript">
   function fn(sender){
  //add the sender object to your array
  //or maybe even just the sender's id
}
</script>
相关文章：