Question

为什么我认为这不重复。

嗯，我认为这与我的要求略有不同。我不想要为所有A标签添加一个监听器，而是减去一个href 单击事件的目标上的属性（如果有）。

我正在尝试“Ajax化”我的整个网站，以便当用户点击页面中包含的任何链接时，脚本会将“url”或HREF属性（已点击的元素）发送到Ajax函数，作为回报，呈现所请求的内容（如点击的链接所示）。

如果元素是链接，我需要找到被点击元素的HREF属性。 这里的问题是，A标签中可以包含许多元素（因为我构造它们的方式），而e.target.href并不总是返回{{1属性。

这是我到目前为止所做的：

HREF

以下是我所拥有的不同“可点击”链接的示例：

function ajaxifyLinks(e) {
    var target = e.target;
    e.preventDefault();
    while(!target.href) {
        target = target.parentNode;
    }
    if(target.href) {
        ajaxLoad(target.href);
    }
}
document.body.addEventListener('click', ajaxifyLinks);

正如您所看到的，这就是 <a href="/cats"> cats </a>  <a href="/hello"> hi </a>  <a href="/bye"> bye </a>不会始终返回HREF属性的原因，因为您实际上是在单击“链接”的span元素，但是，浏览器会将您带到链接。为什么会这样？我有什么方法可以从这种行为中受益？（如同，提取浏览器带您的位置，即使您没有点击A标签）。

我不喜欢我的解决方案，因为while循环只是不断地查找DOM树（当e.target不是链接或链接包含时）。

感谢。

Answer 1

如果单击的元素没有href，它会在其父元素中搜索具有href的元素。香草JS解决方案。

function findUpTag(el, attr) {
    while (el.parentNode) {
        el = el.parentNode;
        if (el[attr]) {
            return el;
        }
    }
    return null;
}

document.body.onclick = function (event) {
    event.preventDefault();

    var href = event.target.href;
    
    if (!href) {
        var closest = findUpTag(event.target, 'href');
        if (closest) {
            href = closest.href;
        }
    }

    document.getElementById('output').innerHTML = 'element clicked: ' + event.target.nodeName + '<br>closest href: ' + href;
};

a,
output {
    display: block;
}

<!-- Link -->
<a href="/cats">
   cats
</a>

<!-- Link -->
<a href="/hello">
   <span>
      <span> hi </span>
   </span>
</a>

<!-- Link -->
<a href="/bye">
   <span>
      bye
   </span>
</a>

<output id="output"></output>

Answer 2

新答案：

<!-- Link -->
<a href="/cats">
   cats
</a>

<!-- Link -->
<a href="/hello">
   <span style="pointer-events: none;">
      <span style="pointer-events: none;"> hi </span>
   </span>
</a>

<!-- Link -->
<a href="/bye">
   <span style="pointer-events: none;">
      bye
   </span>
</a>

Answer 3

使用.parent()，参考：http://api.jquery.com/parent/

例如，你可以做

＆＃13;

var hrefElem = $(target).parent('*[href]');
var link = hrefElem.attr('href');

＆＃13;

Answer 4

只需将点击处理程序附加到页面上的每个链接：

function ajaxify(e)
{
    e.preventDefault();
    ajaxLoad(this.href);
}

[].forEach.call(document.getElementsByTagName('a'), function(el) {
    el.addEventListener('click', ajaxify.bind(el));
});

Answer 5

查看What is event bubbling and capturing?以了解事件如何通过DOM传播。

捕获锚链接并通过Ajax加载它们的技术称为Hijax。由于您正在替换页面上的内容，因此您无法简单地设置单个事件来处理所有链接，并且您可能不希望继续重新绑定每个页面加载，因此该方法你使用的很好，被称为event delegation。

上一篇文章准确描述了您的问题（最后），并且还描述了与您类似的解决方案，这是在这种情况下实现此目的的最佳方式。但是，您可以使用微库来简化某些事件委派;一个例子是gator.js。

找到最近的href属性的最佳方法？

5 个答案: