Question

我正在尝试获取点击源的元素，但我不知道它为什么不起作用。

HTML：

<span class="populate" onclick="populate();" href="?id=1">Hello</span>

CSS：

.populate {
    cursor: pointer;
}

JS：

function populate(event) {
    var event = event || window.event;
    var src = event.srcElement;
    var href = src.getAttribute('href');
    alert(href);
}

我在控制台中看到的错误是没有定义函数populate。

任何帮助或建议都将不胜感激！

Answer 1

问题在于javascript和span标记的顺序。

将javascript函数放在标记

之前

JS

    function populate(event) {
        var event = event || window.event;
        var src = event.srcElement;
        var href = src.getAttribute('href');
        alert(href);
    }

HTML

<span class="populate" onclick="populate();" href="?id=1">Hello</span>

我们需要在调用它们之前定义函数。在这里小提琴 http://jsfiddle.net/HdvGD/7/

Answer 2

你的代码在小提琴中工作得很好。你没有得到它的原因是因为你包裹在onload（）而是在No wrap in Head（左上角的小提琴）中进行了

your fiddle1

你想要onload（）分配像变量

populate = function (event) {
    var event = event || window.event;
    var src = event.srcElement;
    var href = src.getAttribute('href');
    alert(href);
}

检查是fiddle2

选中[ answer to find the difference ]

<强>更新

很抱歉指向折旧的（我已将其删除）。事件对象“event”未从参数传递。其实这里很简单从onclick喜欢

传递活动

 onclick="populate(event);"

然后简单地传递它并访问如下

 function populate(event) {
    var src = event.target || event.srcElement;
    var href = src.getAttribute('href');
    alert(href);
}

Final Fiddle

Answer 3

锚标记包含href属性

 <a class="populate" id="link" onclick="populate(this.id);" href="......">Hello
</a>



   function populate(id)
   {
       var someimage = document.getElementById(id);
       var mysrc = someimage .src;

   }

Answer 4

使用jquery使其工作变得简单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

     <script type="text/javascript">            

        $(document).ready(function() {
            $("#populate").click(function(event) {
                alert("As you can see, the link no longer took you to jquery.com");
                var href = $('#populate').attr('href');
                alert(href);
                event.preventDefault();
            });
        });



        </script>
</head>

<body>

<span class="populate" id="populate" onclick="populate();" href="?id=1" >Hello</span>
</body>
</html>

Answer 5

您的小提琴工作正常，在左侧，第二个下拉菜单，更改为No Wrap - In <head>，现在您的内容已存在且脚本已加载。再试一次：http://jsfiddle.net/HdvGD/4/

Javascript：onclick函数来获取元素

5 个答案: