Question

如何获取调用JS函数的元素的ID？

body.jpg 是狗的图像，因为用户将他/她的鼠标指向身体不同部位的屏幕周围，显示放大的图像。区域元素的ID与图像文件名减去文件夹和扩展名相同。

<div>
    <img src="images/body.jpg" usemap="#anatomy"/>
</div>

<map name="anatomy">
  <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom()"/>
</map>

<script type="text/javascript">
function zoom()
{
 document.getElementById("preview").src="images/nose.jpg";
}
</script>

<div>
<img id="preview"/>
</div>

我做了我的研究，并作为最后的手段来到SO。我更喜欢不涉及jQuery的解决方案。

Answer 1

在调用元素时将对元素的引用传递给函数：

<area id="nose" onmouseover="zoom(this);" />

<script>
  function zoom(ele) {
    var id = ele.id;

    console.log('area element id = ' + id);
  }
</script>

Answer 2

我很惊讶没有人提到在事件处理程序中使用this。它可以在现代浏览器中自动运行，并可以在其他浏览器中使用。如果您使用addEventListener或attachEvent来安装事件处理程序，则可以将this的值自动分配给创建事件的对象。

此外，以编程方式安装的事件处理程序的用户允许您将javascript代码与HTML分开，这通常被视为一件好事。

以下是使用简单javascript在代码中执行此操作的方法：

从HTML中删除onmouseover="zoom()"并在您的javascript中安装事件处理程序，如下所示：

// simplified utility function to register an event handler cross-browser
function setEventHandler(obj, name, fn) {
    if (typeof obj == "string") {
        obj = document.getElementById(obj);
    }
    if (obj.addEventListener) {
        return(obj.addEventListener(name, fn));
    } else if (obj.attachEvent) {
        return(obj.attachEvent("on" + name, function() {return(fn.call(obj));}));
    }
}

function zoom() {
    // you can use "this" here to refer to the object that caused the event
    // this here will refer to the calling object (which in this case is the <map>)
    console.log(this.id);
    document.getElementById("preview").src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg";
}

// register your event handler
setEventHandler("nose", "mouseover", zoom);

Answer 3

您可以在事件处理程序中使用'this'：

document.getElementById("preview").onmouseover = function() {
    alert(this.id);
}

或者将事件对象传递给处理程序，如下所示：

document.getElementById("preview").onmouseover = function(evt) {
    alert(evt.target.id);
}

建议使用attachEvent（对于IE＆lt; 9）/ addEventListener（IE9和其他浏览器）来附加事件。上面的例子是为了简洁。

function myHandler(evt) {
    alert(evt.target.id);
}

var el = document.getElementById("preview");
if (el.addEventListener){
    el.addEventListener('click', myHandler, false); 
} else if (el.attachEvent){
    el.attachEvent('onclick', myHandler);
}

Answer 4

您可以像这样编写处理程序设置：

<area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/>

然后处理程序中的this将引用该元素。现在，我将提供一个警告，我不能100％确定当你在<area>标签中有一个处理程序时会发生什么，主要是因为我没有看到像<area>标签一样十年左右。我认为它应该给你图像标签，但那可能是错的。

编辑 - 是的，这是错误的 - 您获得的是<area>代码，而不是<img>。所以你必须获得该元素的父元素（地图），然后找到正在使用它的图像（即{“1}}，其”usemap“属性引用地图的名称。）

再次编辑 - 除非它无关紧要因为您想要该区域的“id”durr。抱歉没有正确阅读。

Answer 5

我知道你不想要一个jQuery解决方案，但在HTML中包含javascript是一个很大的不。

我的意思是你可以做到，但有很多原因你不应该（如果你想要详细信息，请阅读不引人注目的javascript）。

所以为了其他可能会看到这个问题的人的兴趣，这里是jQuery解决方案：

$(document).ready(function() {
  $('area').mouseover(function(event) {
    $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id'));
  });
});

主要的好处是你不要将javascript代码与HTML混合。此外，您只需要编写一次，它将适用于所有标记，而不必分别为每个标记指定处理程序。

额外的好处是每个jQuery处理程序都会收到一个包含大量有用数据的事件对象 - 例如事件的来源，事件的类型等等，这样可以更容易地编写您所使用的代码类型

最后因为它是jQuery，你不需要考虑跨浏览器的东西 - 特别是在处理事件时的一个主要好处。

Answer 6

我也希望这种情况发生因此只需在调用的函数中传递元素的ID并在我的js文件中使用它即可：

function copy(i,n)
{
 var range = document.createRange();
range.selectNode(document.getElementById(i));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range); 
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById(n).value = "Copied";
}

Answer 7

对于其他意外获得Window元素的人来说，这是一个常见的陷阱：

<a href="javascript:myfunction(this)">click here</a>

实际上将this的范围限定在Window对象上。相反：

<a href="javascript:nop()" onclick="myfunction(this)">click here</a>

按预期传递a对象。（nop（）只是任何空函数。）

获取调用函数的元素的ID

7 个答案: