Javascript 单击子元素时防止重定向

我有一个位于锚中的按钮，这个按钮有一些逻辑，可以通过点击它来触发

问题是，每当我点击该按钮时，由于

anchor

父元素，应用程序就会被重定向

<a href="foo" id="bar">
  <span id="button">click me</span>
</a>

但是，如果我将父

锚定

替换为

div

，则它可以工作-

我做错什么了吗

更新：我知道我可以使用

e.preventDefault（）

阻止重定向，但是，我希望当我单击父元素时重定向，当我单击按钮不时重定向并开始执行我的JS功能（打开模式）。

尝试：

e.preventDefault();

---

小提琴：

你应该使用

e.preventDefault（）在链接上：

$('#bar').on('click', function(e) {
    e.preventDefault();
});

您还可以将其添加到示例中，所有这些都是：

$('#button').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
});

尝试改用
e.preventDefault（）
：

$('#button').on('click', function (e) {
    e.preventDefault();
});

请参阅以了解为什么停止播放（）

不起作用。

尝试以下操作：

$（'#bar'）。在（'click'，函数（e）上{
if（$（e.target）.is（“#按钮”））{
e、 预防默认值（）；
//这里是按钮的逻辑
}
//ancho内的所有其他内容都将导致重定向***
});
使用
返回false
：

$('#button').on('click', function (e) {

    //some logic
    $(this).css('color', 'red');

    return false;
});

stopPropagation不起作用的原因是它会阻止事件处理程序运行，而不是本机行为。
使用
e.preventDefault（）
这是太多问题的重复，请使用搜索。@Nit yes，我研究了很多，但当父元素是
锚定元素时，我没有找到解决方案。单击范围与单击围绕它的锚定标记之间的区别是什么？似乎按钮单击应该触发锚定
href
重定向。如果您希望按钮具有不同的操作，则将其移动到锚定之外。StopperPogation可阻止事件冒泡，在这种情况下，您仍然单击链接，因为它包装了跨度，因此您需要停止浏览器执行其默认操作。单击文本
确定
就是执行回溯操作！这就是它的工作原理。如果我理解正确，这个问题只与单击按钮时不重定向有关。我添加了“确定”以显示单击时，其中的任何其他内容都将重定向。@PeterKA这就是。干杯
$('#button').on('click', function (e) {

    //some logic
    $(this).css('color', 'red');

    return false;
});