是否有任何方法使用onclick html属性调用多个JavaScript函数?


当前回答

你可以只通过代码添加多个,即使你在html中有第二个onclick属性,它会被忽略,click2触发永远不会被打印,你可以添加一个鼠标下的动作,但这只是一个变通办法。

所以最好的方法是通过代码添加它们,如:

var element = document.getElementById("multiple_onclicks"); 元素。addEventListener("点击",function(){console.log("点击3触发")},false); 元素。addEventListener("点击",function(){console.log("点击4触发")},false); <button id="multiple_onclicks" onclick='console.log("click1触发");' onclick='console.log("click2触发");' onmousedown='console.log("click mousedown触发");' >点击我</button> .log

您需要小心,因为事件可能会堆积起来,如果您要添加许多事件,您可能会记不清它们运行的顺序。

其他回答

您可以将所有函数组合成一个并调用它们。像Ramdajs这样的库具有将多个函数组合成一个函数的功能。

<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>

或者你可以把合成作为一个单独的函数在js文件中调用它

const newFunction = R.compose(fn1,fn2,fn3);


<a href="#" onclick="newFunction()">Click me To fire some functions</a>

功能组件

             <Button
                onClick={() => {
                  cancelAppointment();
                  handlerModal();
                }}
             >
                Cancel
             </Button>

下面是另一个答案,它将单击事件附加到.js文件中的DOM节点。它有一个函数callAll,用于调用每个函数:

const btn = document.querySelector('.btn'); const callAll = (fn) = > (……args) = > fn。forEach(fn => fn?.(…args)); 函数logHello() { console.log('你好'); } 函数logBye() { console.log('再见'); } btn.addEventListener(“点击”, callAll (logHello logBye) ); <button type="button" class="btn"> 点击我 < /按钮>

你可以只通过代码添加多个,即使你在html中有第二个onclick属性,它会被忽略,click2触发永远不会被打印,你可以添加一个鼠标下的动作,但这只是一个变通办法。

所以最好的方法是通过代码添加它们,如:

var element = document.getElementById("multiple_onclicks"); 元素。addEventListener("点击",function(){console.log("点击3触发")},false); 元素。addEventListener("点击",function(){console.log("点击4触发")},false); <button id="multiple_onclicks" onclick='console.log("click1触发");' onclick='console.log("click2触发");' onmousedown='console.log("click mousedown触发");' >点击我</button> .log

您需要小心,因为事件可能会堆积起来,如果您要添加许多事件,您可能会记不清它们运行的顺序。

 const callDouble = () =>{
    increaseHandler();
    addToBasket();
}                
<button onClick={callDouble} > Click </button>

这对我来说很有用,你可以在一个函数中调用多个函数。然后调用这个函数。