Question

我有一些Javascript，在一个函数中，我需要获取刚刚单击的按钮的id。我试了几件事，比如：

var e = window.event,
btn = e.target || e.srcElement;
alert(btn.id);

但这只会导致程序崩溃。

而且：

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
    buttons[i].onclick = function(e) {
        alert(this.id);
    };
}

这也只会导致我的程序崩溃。

而且：

function functionName(clicked_id) {
    alert(clicked_id);
}

只是警告＆＃34;未定义＆＃34;。

如果我可以获得一些调试帮助或者只是采用其他方式来做，那将会有所帮助，但它不会有jquery。

由于

Answer 1

如果您使用addEventListener()，那么this将指向发起事件的DOM对象，而this.id将是该对象的id值。

var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function(e) {
        alert(this.id);
    });
}

工作演示：http://jsfiddle.net/jfriend00/7frQ5/

您还需要将for循环结束条件更改为<，而不是<=，因为您要离开数组的末尾。

如果您需要支持早于IE 9的浏览器，您可以使用此跨浏览器事件功能：

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
    addEvent(buttons[i], "click", function(e) {
        alert(this.id);
    });
}

Answer 2

在for循环中，i的值应为<，而不是长度<= ...

试试这个：

for (var i = 0; i < buttonsCount; i++) {

<强> Example

除此之外，您的代码运作良好：

var buttons = document.getElementsByTagName("button"); // target all buttons into a element array/collection
var buttonsCount = buttons.length; // cache the length
for (var i = 0; i < buttonsCount; i++) { // reset the counter; check if its smaller than the array length; add itself
    buttons[i].onclick = function(e) { // assign a function to the onclick event
        alert(this.id); // alert the id attribute of the element clicked 
    };
}

Answer 3

function testClick(id){
  alert(id);
}

<a href="javascript:void(0);" id="test" onclick="testClick(id)"> Click</a>

Answer 4

看看你的第一次尝试，我相信你可以做一些事情：

比如说你有以下html

<div id="testId" onClick ="doStuff(event)"> click me </div>

您可以在“doStuff”中获取onclick事件所在元素的id属性：

function doStuff(event){
    event = event || window.event; 
    var element = event.target || event.srcElement; 
    if (element.nodeType == 3){
       element = element.parentNode;
    }
    var id = element.id;
    alert(id);//This will contain the value of the id attribute of the above DIV element, "testId"
}

注意：window.event和event.srcElement是Microsoft访问发生的最后一个事件的实现，以及分别触发此事件的元素。

检查节点类型的if语句是为了防止safari可能发生的某个问题，即：如果事件发生在包含文本的元素中，则此文本节点将成为此事件的元素发生了，所以为了解决这个问题，我们可以检查节点类型，如果它是一个文本节点，我们就会回到它的父节点。

您可以点击此链接了解有关活动的更多信息：http://www.quirksmode.org/js/events_properties.html

这是对可用节点类型的一个很好的参考： Node Types

希望这有助于澄清您遇到的问题。

Javascript如何获取刚刚单击的按钮的ID

4 个答案: