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

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从子级中删除click事件

$('#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属性，您需要将处理程序绑定到返回false的click事件。 在jQuery中，您可以通过以下方式实现：

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

    return false;
});

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

Answer 4

您应该在锚点上添加一个事件侦听器，并阻止默认行为：

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