停止多个内联函数JS的事件传播答案

【问题标题】：Stop event propagation for multiple inline functions JS停止多个内联函数JS的事件传播
【发布时间】：2014-09-19 14:44:39
【问题描述】：

我有这种类型的代码：

<button onclick="fn1();fn2();fn3()">Clic</button>

我在 fn1 中测试了一些东西，如果它是真的，我不想调用 fn2 和 fn3。我在 fn1 中使用了 event.stopPropagation()（以跨浏览器的方式并将事件传递给函数），但无论如何都会调用其他函数。

谁能帮忙？

【问题讨论】：

为什么不正确地附加三个事件侦听器而不是一个？

标签： javascript events inline stoppropagation

【解决方案1】：

这不是一个好习惯，但有办法。您可以抛出自己的异常来停止执行。我再说一遍，这不是一个好习惯

<script type="text/javascript">
function one(){
    var a = 1;
    console.log('one');
    if(a == 1){
        throw new RangeError("Sorry, but you are too young for this movie");
    }
}
function two(){
    console.log('two');
}
</script>

<button onclick="one();two();">Click me.</button>

【讨论】：

你好安德鲁。谢谢，但确实有点难以触发错误^^

【解决方案2】：

您可以更改 fn1 函数以返回您执行的检查结果。然后可以将onclick属性改为：

if (!fn1()) { fn2(); fn3(); };

我还建议您熟悉.addEventListener()，而不是使用 onclick 属性。

【讨论】：

【解决方案3】：

试试这个：

<html>
<head>
  <script>
    function fn1() {
        alert('fn1()');
        return false;
    }

    function fn2() {
        alert('fn2()');
        return true;
    }

    function fn3() {
        alert('fn3()');
        window.location.assign("http://www.google.com");
    }
  </script>
</head>
<body>
    <button onclick="fn1()&&fn2()&&fn3()">Click</button>
</body>
</html>

所有函数都应该返回布尔值然后在 onclick 中使用逻辑运算符 &&

<button onclick="fn1()&&fn2()&&fn3()">Click</button>

你可以看到 fn1() 是否返回 false f2() 和 f3() 没有被执行。

【讨论】：

谢谢。这行得通。唯一不好的一点是，您需要返回 true 才能触发下一个函数……但它运行良好。谢谢。

【解决方案4】：

您可以简单地在按钮中添加一个 if 条件，类似于下面提到的：

<button onclick="if(!fn1()){fn2();fn3()}">Click</button>

Working Fiddle

【讨论】：

在您的 JSFiddle 中，如果您通过更改 onclick，则 fn2 和 fn3 是仍然没有被解雇，即使在 fn1 中返回 true ...
嗨@Fred：条件是 if(!fn1()) 并且它在小提琴中返回 true 所以它不会执行 fn2 和 fn3 如果我们将返回更改为 false 它将执行它们作为要求
@fred 让我更改返回值并在此评论中添加小提琴：jsfiddle.net/uhwgfzqd/1
@Fred：这个小提琴是你的按钮 html 标记，它是 fn2 和 fn3，因为它是真的 jsfiddle.net/uhwgfzqd/2
是的，好的，我做了更改......我可能犯了一个错误......好的:)