javascript - 从子元素中删除超链接行为

Question

我有一个锚标记，在其中我通过 jQuery 附加了一些 div。我希望父<a>标签的“超链接”效果不应该出现在附加的子元素中。

我们如何使用 jQuery 或其他方式来实现这一点。

这是我想要的小提琴。

更新： 大多数答案都说明了如何消除点击效果。是不是有什么东西可以阻止子元素锚标签的每一个默认行为？

Answer 1

小提琴

行。这是一些示例 HTML

<a href="google.com" id="first">
    <div>
        <p>Blah</p>
    </div>
    <div>
        <p>Blah</p>
    </div>
    <div>
        <p>Blah</p>
    </div>
</a>

<a href="google.com" id="second">
    <div>
        <p>Blah 2</p>
    </div>
    <div>
        <p>Blah 2</p>
    </div>
    <div>
        <p>Blah 2</p>
    </div>
</a>

此 CSS 将删除下划线，更改字体颜色和光标

div{
    display: inline;
}

#second{
    text-decoration: none;
    color: #000;
    cursor: default;
}

jquery 从子项中删除点击事件

$('#second').children().each(function(){
    $(this).click(function(e){
        e.preventDefault();
    });
});

更新：根据您的评论，您正在尝试做的事情很复杂而且有点奇怪。您说由于某种原因您必须将 div 包装在一个 achor 标记中，但不能让它们继承属性。你将不得不做出一些权衡。诀窍是从 a 标签中删除“href” 。您不必为此编写任何 jQuery/javascript。事实上，那时你甚至不需要任何 CSS。从本质上讲，从上面删除所有 css 和 jquery，并从第二个 a 中删除 href。

小提琴

Answer 2

您可以使用 :first-child 选择器。看http://api.jquery.com/first-child-selector/

Answer 3

您可以使用 CSS 删除下划线：

a div {
    text-decoration: none
}

要阻止锚点遵循其href属性，您需要将处理程序绑定到click返回 false 的事件。在 jQuery 中，您可以通过以下方式实现：

$('a div').on('click', function() {
    // do whatever you want to do here

    return false;
});

div在您提供 jsfiddle 之后，我编辑了选择器（添加）。不过，还有一件事。根据您的小提琴，我假设您不希望用 div 包裹“某物”。它应该看起来像这样：jsfiddle

Answer 4

您应该向锚点添加事件监听器并防止默认行为：

document.getElementsByTagName("a")[0].addEventListener("click", function(e){
    if(e.target.tagName=="DIV") e.preventDefault();
});