同じ要素に2つのイベントを持たせるにはどうすればいいですか？

Question

<li>要素（クリック）をクリックしたときにトリガされるこの機能があります。
同じ<li>要素（クリック解除）をクリックすると、別の機能が起動されます。

<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でコードを探しています。 あなたは、例えば、クラス値をトグルし、それが存在だかどうかに基づいて何かを行うことができますあなたに

Answer 1

ありがとうございました

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>

CLASSLISTがIE 10以上が必要であることに注意してください。古いブラウザをサポートする必要がある場合、同じ機能をかなり単純にコーディングすることができます。以下は、同じ機能を提供するために、CLASSLISTオブジェクトを使用し、最初のクリック後に何が起こる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>

Answer 2

<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> 

Answer 3

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 
    } 
}