And this works fine

Question

我已尝试过jQuery和javascript，但没有一个能够带来链接的属性。这是我正在使用的代码 - 这不是在callme函数的警报中打印任何内容

function callMe() {
var ll = this;    
var id1 = ll.getAttribute('id');
alert('Inside callMe...'+id1);
}

function load() {   
 var lnk = new Array();
 lnk = document.getElementsByTagName("a");
 var len = lnk.length;

for (var i=5;i<len;i++){
var id = lnk[i].getAttribute('data-id');
lnk[i].attachEvent('onclick',callMe);
}

}

我也试过使用以下jQuery

$("a").click(function(){
alert(this.id); 
var shouldTrack = $(this).attr('id');
alert('Inside callMe...'+shouldTrack); });

Answer 1

您是否在页面加载完成之前运行此代码？要么必须在</body>的末尾，要么在window.onload或（在jQuery中）调用$(document).ready

此外，attachevent不是跨浏览器。

And this works fine

Answer 2

> function callMe() {
>   var ll = this;

使用MS专有attachEvent时，被调用者的此关键字未设置为调用侦听器的元素（就像W3C addEventListener方法时一样或者使用HTML内部事件处理程序）。有许多修复方法，通常使用关联的事件对象，因此函数变为：

function callMe(evt) {
  var evt = evt || window.event;
  var ll = evt.target || evt.srcElement;

>   var id1 = ll.getAttribute('id');

不需要将 getAttribute 用于标准DOM属性：

    var id1 = ll.id;

>   alert('Inside callMe...'+id1); 
> }
> 
> function load() {
>   var lnk = new Array();
>   lnk =  document.getElementsByTagName("a");

创建数组并将其分配给 lnk 没有太多意义，只能立即用 getElementsByTagName 返回的NodeList替换它。此外，您似乎是在链接之后，因此最好访问已经可用且仅包含链接的 document.links 集合，而 getElementsByTagName（'a'）将包括所有一个元素，包括锚点。

所以上面两行可以是：

    var lnk = document.links;

>   var len = lnk.length;
> 
>   for (var i=5; i<len; i++) {
>     var id = lnk[i].getAttribute('data-id');
>     lnk[i].attachEvent('onclick',callMe);

如上所述， attachEvent 是一种所有浏览器都不支持的专有MS方法。最好有一个首先尝试W3C addEventListener 方法的函数，然后是 attachEvent 。一个非常简单的版本是：

function addEvent(el, evt, fn) {
  if (el.addEventListener) {
    el.addEventListener(evt, fn, false);
  } else if (el.attachEvent) {
    el.attachEvent('on' + evt, fn);
  }
}

注意事件是等效的HTML内部事件名称，没有前导'on'。因此，附加侦听器变为：

      addEvent(lnk[i], 'click', callMe);

>   }
> }

此外，该函数应在文档准备好后运行，因此要么使用正文的onload属性， window.onload ，要么将脚本放在结束正文标记之前。

最后，不要忘记致电加载。这是重构的整个脚本：

<a href="#" id="link0">Link0</a>
<a href="#" id="link1">Link1</a>
<a href="#" id="link2">Link2</a>
<a href="#" id="link3">Link3</a>
<a href="#" id="link4">Link4</a>
<a href="#" id="link5">Link5</a>

<script type="text/javascript">

function addEvent(el, evt, fn) {
  if (el.addEventListener) {
    el.addEventListener(evt, fn, false);
  } else if (el.attachEvent) {
    el.attachEvent('on' + evt, fn);
  }
}

function callMe(evt) {
  var evt = evt || window.event;
  var ll = evt.target || evt.srcElement;
  var id1 = ll.id;
  alert('Inside callMe...'+id1); 
}

function load() {
  var lnk = document.links;
  var len = lnk.length;

  for (var i=5; i<len; i++) {
    var id = lnk[i].getAttribute('data-id');
    addEvent(lnk[i], 'click', callMe);
  }
}

load();

</script>

如何使用attachListener获取链接的属性？

2 个答案:

And this works fine