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

时间:2013-07-11 21:14:47

标签: javascript

我标有几个跨度。

<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>

我想创建一个添加“on click”事件的函数,该事件检测单击了哪个跨度。即如果首先点击第一个,它将返回'0',第二个'1'......等等。

我意识到我可以使用

document.getElementByClassName("viewEdit)

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

我试图在这里研究这个问题,但怀疑我说错了,因为我找不到任何东西。如果这是对其他地方的类似问题的回答,请道歉。

6 个答案:

答案 0 :(得分:5)

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

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

event.target将保留被点击的节点。

答案 1 :(得分:2)

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)
}

答案 2 :(得分:1)

获取span元素的父节点然后添加事件处理程序的最简单方法...
Live Demo

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);

答案 3 :(得分:1)

因此,这将让您在集合中找到被点击项目的索引。

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);
}

这很快,但到目前为止应该按照你的要求行事...... Here is a fiddle for you.

答案 4 :(得分:0)

您可以向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

答案 5 :(得分:-2)

<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>