0

我有几个跨度标签。

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

创建一个数组，但我不确定如何检测单击了哪个数组。

我试图在这里研究这个问题，但怀疑我的措辞是错误的，因为我什么也找不到。抱歉，如果这是在其他地方回答的类似问题的重新散列。

4

6 回答 6

5

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

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

event.target将保存被单击的节点。

于 2013-07-11T21:17:41.710 回答
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)
}
于 2013-07-11T21:16:58.730 回答
1

获取跨度元素的父节点然后添加事件处理程序的最简单方法...
现场演示

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);
于 2013-07-11T21:26:31.660 回答
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);
}

这是一个快速但应该做你到目前为止所要求的......这是给你的小提琴。

于 2013-07-11T21:30:14.647 回答
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 上

于 2013-07-11T21:34:58.533 回答
-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>
于 2013-07-11T21:20:35.880 回答