如何在相同的元素上有兩個事件？（點擊和取消點擊）

-2

我有這個功能，當我點擊<li>元素（點擊）時觸發。
當我點擊相同的<li>元素（unclick）時，我想觸發另一個功能。如何在相同的元素上有兩個事件？（點擊和取消點擊）

<ul id="list"> 
    <li>Option1</li> 
    <li>Option2</li> 
    <li>Option3</li> 
    <li>Option4</li> 
    <li>Option5</li> 
    <li>Option6</li> 
    </ul> 




<script> 
var elems = document.getElementsByTagName('li'); 
Array.from(elems).forEach(v => v.addEventListener("click", addToArray)); 

function addToArray() { 

} 

</script>

請問，我正在尋找可以做到這一點的普通JavaScript代碼。謝謝

來源

2017-03-04 Eggz

？ – the12

對不起。我不知道該怎麼做，爲什麼我首先要問。我不是在要求你們爲我編寫代碼，爲什麼我以一般的形式編寫代碼。我所有的嘗試都沒有任何意義。現在，在您向我展示「.toggle and .contains」後，我可以自己嘗試。@ RobG – Eggz

不用擔心。只要注意使用新功能，仍然有許多瀏覽器不支持箭頭功能或ECMAScript 2015功能。即使使用IE10，許多頁面也會將其瀏覽到IE7模式並執行瀏覽器嗅探，因此拒絕提供內容。 – RobG

您可以根據它是否存在切換的一類值，並做一些與否，例如

window.onload = function() { 
 
    [].forEach.call(document.querySelectorAll('li'), function(li) { 
 
    li.addEventListener('click',handleClick,false); 
 
    }); 
 
}; 
 

 
function handleClick(){ 
 
    this.classList.toggle('selected'); 
 
    if (this.classList.contains('selected')) { 
 
    console.log(this.textContent + ' is selected'); 
 
    } else { 
 
    console.log(this.textContent + ' isn\'t selected'); 
 
    } 
 
}

.selected { 
 
    background-color: green; 
 
}

<ol> 
 
    <li>First 
 
    <li>Second 
 
    <li>Third 
 
</ol>

注意班級列表需要IE 10或更大。如果需要支持較舊的瀏覽器，則可以相當簡單地編碼相同的功能。下面以班級名冊目的是提供相同的功能，並首次點擊後，會發生什麼情況將努力回到IE 6

// Helper object to provide classList functionality 
 
var classList = { 
 
    contains: function(el, className) { 
 
    var re = new RegExp('(^|\\s)' + className + '(\\s|$)'); 
 
    return re.test(el.className); 
 
    }, 
 
    add: function (el, className) { 
 
    if (!classList.contains(el, className)) { 
 
     el.className += ' ' + className; 
 
    }  
 
    }, 
 
    remove: function(el, className) { 
 
    if (classList.contains(el, className)) { 
 
     var re = new RegExp('(^|\\s)' + className + '(\\s|$)'); 
 

 
     el.className = el.className.replace(re, ' '); 
 
    }  
 
    }, 
 
    toggle: function(el, className) { 
 
    if (classList.contains(el, className)) { 
 
     classList.remove(el, className); 
 
    } else { 
 
     classList.add(el, className); 
 
    } 
 
    } 
 
}; 
 

 
window.onload = function() { 
 
    var lis = document.getElementsByTagName('li'); 
 
    for (var i=0, iLen=lis.length; i<iLen; i++) { 
 
    lis[i].addEventListener('click', handleClick, false); 
 
    } 
 
}; 
 

 
function handleClick(){ 
 
    classList.toggle(this, 'selected'); 
 
    if (classList.contains(this, 'selected')) { 
 
    console.log(this.innerHTML + ' is seleced'); 
 
    } else { 
 
    console.log(this.innerHTML + ' is not seleced'); 
 
    } 
 
}

.selected { 
 
    background-color: red; 
 
}

<ol> 
 
     <li>First 
 
     <li>Second 
 
     <li>Third 
 
    </ol>

來源

2017-03-04 00:57:44 RobG

<script> 
var elems = document.getElementsByTagName('li'); 
Array.from(elems).forEach(v => { 
    v.addEventListener("click", addToArray)); 

function addToArray(event) { 
    if (event.target.classList.includes('active')) { 
     event.target.classList.split("active").join(""); 
     // unclick handler here 
    } else { 
     event.target.classList.push("active"); 
     // click handler here 
    } 
} 

</script>

來源

2017-03-04 00:51:08

var elems = document.getElementsByTagName('li'); 
Array.from(elems).forEach(v => v.addEventListener("click", addToArray)); 

function addToArray() { 
    this.classList.toggle('selected'); 

    if (this.classList.contains('selected')) { 
    console.log('Selected item'); 
    } 
    else { 
    //Do something else 
    } 
}

來源

2017-03-04 03:36:53

如何在相同的元素上有兩個事件？ （點擊和取消點擊）

回答

相關問題

如何在相同的元素上有兩個事件？（點擊和取消點擊）