我标有几个跨度。
<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)
创建一个数组,但我不知道如何检测哪一个已被点击。
我试图在这里研究这个问题,但怀疑我说错了,因为我找不到任何东西。如果这是对其他地方的类似问题的回答,请道歉。
答案 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);
}());
上
答案 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>