Javascript 如何防止grand child元素的超链接

如何使

.no click

div在不进入页面的情况下可单击？有人能帮我吗

下面是一个例子，这是一个包含广告的网页，如果您将鼠标悬停在广告上方，则会显示“共享”按钮和“保存”按钮，并且该按钮可单击（按钮位于href中）

.test{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
}
.没有点击{
位置：绝对位置；
最高：25%；
右：25%；
宽度：50px；
高度：50px；
背景颜色：蓝色；
}

css:
.测试{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
}
.没有点击{
位置：绝对位置；
最高：25%；
右：25%；
宽度：50px；
高度：50px；
背景颜色：蓝色；
}
$（'a'）。在（'click'，函数（事件）{
event.preventDefault（）；
})
正确的方法是使用，这是其历史别名的更新方法，并取消事件冒泡

在某些情况下可以工作，但请注意，它不会取消冒泡，但可以有类似的效果

更新：除非与
preventDefault
结合使用，否则此选项似乎不起作用。稍后会看一看，看看原因是什么

堆栈片段


var no_click=document.querySelector（'.no click'）；
无单击。添加的EventListener（'click'，函数（e）{
e、 停止传播（）；
e、 preventDefault（）；//temp.update，但不需要这样做
console.log（'hey'）；
})
.test{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
}
.没有点击{
位置：绝对位置；
最高：25%；
右：25%；
宽度：50px；
高度：50px；
背景颜色：蓝色；
}
一种方法是：


document.querySelector（'.no click'）。addEventListener（'click'，函数（e）{
e、 preventDefault（）；//此行将阻止浏览器跟随链接
//您可能要运行的其他代码
});
css:
.测试{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
}
.没有点击{
位置：绝对位置；
最高：25%；
右：25%；
宽度：50px；
高度：50px；
背景颜色：蓝色；
}

如果不访问example.com，如何使.no cick div可单击？有人能帮我吗？谢谢

当然。试试这个最容易理解的方法

这里的一个答案是：

添加onclick=“return false”。

为了让您更好地理解，请阅读以下内容：

您只需要在div上添加onclick函数并从中返回false

HTML

<a href="http://example.com">
  <div class="test">
     <div class="no-click" onclick="return stopRedirection();">

    </div>
  </div>
</a>

我已通过以下给定链接解决了此检查：

希望这能解决您的问题。
简单易行，如果您单击了
不单击
，只需防止
元素的单击事件，如果没有，请转到链接。查看下面的“我的代码片段”：


$（'no click'）。在（'click'，函数（事件）{
event.preventDefault（）；
警惕（“是的，没必要去！”）
});
.test{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
}
.没有点击{
显示：无；
位置：绝对位置；
最高：25%；
右：25%；
宽度：50px；
高度：50px；
背景颜色：蓝色；
}
。您的链接：悬停。无需单击{
显示：块；
}
如果需要，请从中输出链接操作。无需单击div，但它应该可以在锚上工作；
然后使用这两个块

<script type="text/javascript">
$('.no-click').on('click', function(event){    
        event.preventDefault(); 
})
$('a').on('click', function(){
      document.ontouchmove = function(){ return true; }
})
</script>

if you want a also should not work then use only firs blcok!

Thanks!


$（'.no click'）。在（'click'，函数（事件）{
event.preventDefault（）；
})
$（'a'）。在（'click'，function（）上{
document.ontouchmove=函数（）{return true；}
})
如果你想要一个也不应该工作，那么只使用firs blcok！
谢谢
你能再解释一下吗？您希望div可以单击，但不使用href？您可以添加
。不单击：hover{cursor:pointer}
，这样它将在hover上更改光标，然后处理javascript中的点击，当你点击这个div时，你想要什么功能，还是只想在上面显示指针光标？这就是我想发布的答案。但是在我的测试环境中，stopPropagation不起作用。但它应该这样做。（在我看来，默认不是正确的解决方案）。你能告诉我为什么这样不行吗？它必须使用JSFIDLE来处理链接吗？同样在你的回答中，点击红色div，不应该将你重定向到example.com吗？@MihaiT实际上我不应该，因为我上面的代码片段确实有效。我上面的代码片段对你不管用吗？是的，它管用。但我不明白为什么在jsfiddle中它没有：）。同样在你的回答中，点击红色的div，它不应该将你重定向到example.com吗？哦。我试图在您的代码片段中单击红色div；t重定向，因为它是一个不安全的连接，
http
，而不是
https
。控制台中的错误是混合内容：“”处的页面是通过HTTPS加载的，但请求了不安全的资源“”。此请求已被阻止；内容必须通过HTTPS提供。
回答得好。Voted@MihaiT我改成了https，这样它现在就可以工作了，当点击红色的divSimple onclick=“return false”就足够了。不需要函数。是的，我知道也可以。我添加了函数以使其易于理解。我们总是可以通过重构来减少代码。我会给你一个投票，因为这是最简单、最快的解决方案，但你仍然可以在你的帖子中提到这一点：这是一个例子，这是一个有广告的网页，如果你将鼠标悬停在广告上，共享按钮和保存按钮会显示出来，它可以点击（按钮在href中）。这是一个例子，这是一个有广告的网页，如果你将鼠标悬停在广告上，共享按钮和保存按钮会显示出来，它可以点击（按钮
s位于href内）@ElodAndras是的，我的代码对您有效。我刚刚编辑了您提到的为悬停状态添加更多代码。运行我的
stopRedirection = () => {
    alert("Div Clicked!");
  return false;
}

<script type="text/javascript">
$('.no-click').on('click', function(event){    
        event.preventDefault(); 
})
$('a').on('click', function(){
      document.ontouchmove = function(){ return true; }
})
</script>

if you want a also should not work then use only firs blcok!

Thanks!