我无法调用按钮内的功能 <a href="">

Question

我在编辑模式下工作 (contenteditable=true)，我需要调用 link 中的函数，但它没有响应。

可以做吗？我需要

注意：我取消了调用函数的按钮，但是也没用：

我的HTML:

<body>
  <a href="link.html"><i class="miniButton">Inside</i>LINK Think</a>
  <div id="message"></div>
  <i class="miniButton">out link button</i>
</body>

小米密码：

$("body").on("click",'a', function() {
    return false;
});

$(document).on("click",'.miniButton', function() {
    $("#message").html("Good Job");
});

Mi jsFiddle:

https://jsfiddle.net/1go4ecdj/18/

Answer 1

而不是 return false 你应该试试这个。

$("a").on("click", function(event) { 
    event.preventDefault();
});

Answer 2

所有锚元素上的 return false 阻止了点击事件到达其中的 .miniButton 元素。如果您需要阻止导航，您可以在事件上使用 preventDefault() 而不是完全取消它：

$("body").on("click",'a', function(e) {
    e.preventDefault()
});

$(document).on("click",'.miniButton', function() {
    $("#message").html("Good Job");
});

body{padding: 3em  ;}
a{
  color: White;
  background: SteelBlue;
  padding: 1em;
  border-radius: 4px;
  text-decoration: none;
}
i{
  color: White;
  background: Black;
  padding: 6px;
  margin-right: 10px;
}
#message{
  margin-top: 2em;
  margin-bottom: 2em;
  background: #FFEEAA;
  padding: 1em;
  width: 160px;
  height: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="link.html"><i class="miniButton">Inside</i>LINK Think</a>
  <div id="message"></div>
  <i class="miniButton">out link button</i>

我无法调用按钮内的功能 <a href="">

I can not call function inside button <a href="">

function

call

button