div在锚标签下单击不起作用jquery答案

【问题标题】：div click under anchor tag not working jquerydiv在锚标签下单击不起作用jquery
【发布时间】：2014-07-09 11:37:31
【问题描述】：

这里是锚标记内的子 div，如何获取子 div 的点击事件，例如，如果用户单击具有类 .press_me alert msg get display 的 div，并且如果用户单击主 div 上的任何位置，它应该重定向到相应的锚链接

HTML：

<a href="https://www.google.co.in"><div class="dv_child"> America <div class="press_me">click me</div></div></a>
 <a href="https://www.google.co.in" target="_blank"><div class="dv_child"> India <div class="press_me">click me</div></div></a>
<a href="https://www.google.co.in" target="_blank"><div class="dv_child"> Russia <div class="press_me">click me</div></div></a>
<a href="https://www.google.co.in" target="_blank"><div class="dv_child"> Germany <div class="press_me">click me</div></div></a>

查询：

$(".press_me").on('click', function () {
    alert($(this).parent().html());
});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

使用$(this) 而不是$this。您也可以使用event.stopPropagation() 停止将子点击传播给父。

在您的情况下，您只需要阻止锚标记的默认行为。为此，请使用event.preventDefault()

$(".press_me").on('click', function (e) {
    e.preventDefault()
    alert($(this).parent().html());
});

Updated fiddle

【讨论】：

感谢它解决了两个答案 btw event.preventDefault();和 event.stopPropagation()
@Satindersingh 很高兴它有帮助。
preventDefault() 阻止浏览器转到给定的链接。 stopPropagation() 阻止父元素接收事件（在这种情况下，它是点击事件）。更多详情请至stackoverflow.com/questions/4616694/…

【解决方案2】：

使用event.preventDefault它会停止默认操作

$(".press_me").on('click', function (event) {
     event.preventDefault();
    alert($(this).parent().html());
});

Fiddle

【讨论】：

你的答案是完美的，在提醒消息后它不应该重定向到我想要的链接，谢谢男人

【解决方案3】：

您还必须更新第一个元素锚：

HTML

<a href="https://www.google.co.in" target="_blank"><div class="dv_child_1"> America <div class="press_me">click me</div></div></a>

<a href="https://www.google.co.in" target="_blank"><div class="dv_child_1"> India <div class="press_me">click me</div></div></a>

<a href="https://www.google.co.in" target="_blank"><div class="dv_child_1"> Russia <div class="press_me">click me</div></div></a>

<a href="https://www.google.co.in" target="_blank"><div class="dv_child_1"> Germany <div class="press_me">click me</div></div></a>

JS（与已经建议的相同）

$(".press_me").on('click', function (event) {
    event.preventDefault();
    alert($(this).parent().html());
});

JSFIDDLE DEMO

【讨论】：

感谢回复，但这不会解决，如果用户点击 .press_me 则锚标签不应该工作
@j809 你缺少函数（事件） event.preventDefault();..?