Question

我标有几个跨度。

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

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

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

Answer 1

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

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

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

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

Answer 3

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

Answer 4

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

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.

Answer 5

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

上

Answer 6

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

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

6 个答案: