如何為1個功能分配多個“ onclick事件”（用於HTML按鈕），而不觸發所有語句

Question

我一直在嘗試為多個HTML分配onclick事件

元素。 我試圖通過僅使用1個函數來使代碼盡可能少。 我知道通過將事件屬性添加到HTML元素來做到這一點的簡單方法，如下所示：

<body>

<p id="demo1" onclick="myFunc(this)">Paragraph 1</p>
<p id="demo2" onclick="myFunc(this)">Paragraph 2</p>

<script>
function myFunc(para) {
  para.style.color = "red";
}
</script>

但是，如果我要向多個HTML元素添加許多事件屬性，則HTML文檔將是一團糟，對嗎？ 所以我寧願用JavaScript編寫代碼。 但是問題是，當我在Js中分配代碼時，點擊其中一個

標簽，它們都被觸發（順便說一句，我對Js編碼非常陌生，所以可能是我的愚蠢）

<body>
<p id="demo1">Paragraph 1</p>
<p id="demo2">Paragraph 2</p>
<script>
    var x = document.getElementById("demo1").onclick = myFunc;
    var y = document.getElementById("demo2").onclick = myFunc;

    function myFunc() {
        if (x == document.getElementById("demo1").onclick) {
            document.getElementById("demo1").style.color = "red";
        } 
        if (y == document.getElementById("demo2").onclick) {
            document.getElementById("demo2").style.color = "red";
        }
    }
</script>

Answer 1

考慮改用事件委托-將偵聽器分配給要在其上偵聽事件的元素的容器，然后檢查event.target （觸發事件的單擊元素）以查看它是否是您希望偵聽器執行的元素運行：

 document.body.addEventListener('click', ({ target }) => { // Only continue on `<p>` elements: if (!target.matches('p')) { return; } target.style.color = 'red'; });

 <p id="demo1">Paragraph 1</p> <p id="demo2">Paragraph 2</p> <div>some other element that will not change on click</div>

如果要向每個單獨的元素添加偵聽器，請在偵聽器中選中this元素以引用被單擊的元素，然后可以根據需要分配其樣式：

 document.getElementById("demo1").onclick = myFunc; document.getElementById("demo2").onclick = myFunc; function myFunc() { this.style.color = 'red'; }

 <p id="demo1">Paragraph 1</p> <p id="demo2">Paragraph 2</p>

（您也可以在myFunc使用參數來獲取event ，然后從中獲取event.target ，就像在第一種方法中一樣）

Answer 2

jQuery是一個選擇。

$(document).on('click','p',function(){
   $(this).css('color','red');
});

Answer 3

您可以依靠事件對象來確定觸發該函數的元素以及事件的類型（單擊，懸停，按鍵等）：

handleEvent({type}) { switch(type) { case "click": return require("./actions/doStuff")(/* action dates */) case "mouseenter": return this.setState({ hovered: true }) case "mouseleave": return this.setState({ hovered: false }) default: return console.warn('No case for event') } }

如何為1個功能分配多個“ onclick事件”（用於HTML按鈕），而不觸發所有語句

問題描述

3 個解決方案

解決方案1
1 已采納 2019-01-09 12:34:27

解決方案2
1 2019-01-09 12:35:42

解決方案3
0 2019-01-09 12:36:46

如何為1個功能分配多個“ onclick事件”（用於HTML按鈕），而不觸發所有語句

問題描述

3 個解決方案

解決方案1 1 已采納 2019-01-09 12:34:27

解決方案2 1 2019-01-09 12:35:42

解決方案3 0 2019-01-09 12:36:46

解決方案1
1 已采納 2019-01-09 12:34:27

解決方案2
1 2019-01-09 12:35:42

解決方案3
0 2019-01-09 12:36:46