单击其中的引导切换按钮时如何禁用锚标记单击答案

【问题标题】：How to disable anchor tag click when clicked on bootstrap toggle button inside it单击其中的引导切换按钮时如何禁用锚标记单击
【发布时间】：2017-09-26 06:26:18
【问题描述】：

我是 BootstrapToggle 的新手，我在这样的锚标记内使用 Bootstrap 切换按钮：

这里是sn-p的代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<a onclick="alert('hello'); return false;">
   <span>Hello World</span>
   
   <input type="checkbox" data-toggle="toggle" data-on="Accepted" data-off="Rejected" data-onstyle="success">
        
</a>

现在，如果我切换按钮，锚标记警报也会被调用。我只想要我的要切换的按钮如果我更改它，则在这种情况下不应该调用锚标记警报。

任何帮助将不胜感激。

【问题讨论】：

删除onclick="alert();"并放入href="javascript:void(0);
但是如果我也想在锚点点击时调用 javascript 方法呢

标签： javascript jquery html twitter-bootstrap togglebutton

【解决方案1】：

而不是这个：

<a onclick="alert('hello'); return false;">

使用

<a href="javascript:void(0);">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<a href="javascript:void(0);">
   <span>Hello World</span>
   
   <input type="checkbox" data-toggle="toggle" data-on="Accepted" data-off="Rejected" data-onstyle="success">
        
</a>

【讨论】：

感谢 Mayank，但如果我也想在锚点点击上调用方法。
然后使用onclick，上面的解决方案是处理href
但在这种情况下，如果我切换按钮，也会触发 onclick。
那么问题是什么？
问题是，如果我切换按钮，我不想触发 onclick，如果我点击锚链接，我不想触发按钮

【解决方案2】：

我建议你使用，因为我遇到了同样的问题。

<a href="javascript:void(0);">

【讨论】：

感谢 Kavish，但我也想在锚点点击时调用 javascript 方法

【解决方案3】：

用锚点包裹按钮是一个奇怪的解决方案，但如果这是你想要的......

你可以试试这样的

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<a href="javascript:void(0);">
   <span id="MySpan">Hello World</span>
   
   <input type="checkbox" data-toggle="toggle" data-on="Accepted" data-off="Rejected" data-onstyle="success">
        
</a>

<script>

$('#MySpan').click(function() {

alert('hello world');
});

</script>

【讨论】：

感谢 Kordi，但我真正想要的是锚标记上的 onclick 方法而不是切换按钮，当我们单击切换按钮时，不能调用锚单击
@Lakhtey，我认为你在自相矛盾。您是说您不希望调用锚点单击，这是 kavish 和 Mayank 建议的解决方案。但是后来你说你想要调用 javascript。老实说有点令人困惑。
基本上我想要的是我的锚标签上的点击，但不想在按钮被切换时触发点击。仅当单击锚标记内的跨度文本时才应调用 OnClick。希望现在你明白我的意思
为什么要用锚点包裹切换按钮？
这是我正在关注的模板