<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.selected {
background: #0f0;
}
li {
cursor: pointer;
}
</style>
</head>
<body>
Click on a list item to select it.
<br>
<ul id="ul">
<li>Christopher Robin</li>
<li>Winnie-the-Pooh</li>
<li>Tigger</li>
<li>Kanga</li>
<li>Rabbit. Just rabbit.</li>
</ul>
<script>
ul.onclick = function(event) {
if(event.target.tagName != "LI") return;
//only going to be applied on lis
if (event.ctrlKey || event.metaKey) {
toggleSelect(event.target);
} else {
singleSelect(event.target);
}
}
ul.onmousedown = function() {
return false;
};//disables default mouse action like being selected
//as the task asked, PREVENT THE NATIVE BROWSER SELECTION
function toggleSelect(li){
li.classList.toggle('selected');
}//this one doesnt do much
function singleSelect(li) {
let selected = ul.querySelectorAll('.selected');
for(let elem of selected) {
elem.classList.remove('selected');
}//cancel the selection on ul i guess?
//it ALSO CANCELED PRE GROUP SELECTED LIS
//INICIATE THE FIELD
li.classList.add('selected');
//and limits the selected state only for li
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<style>
.selected {
background: #0f0;
}
li {
cursor: pointer;
}
</style>
</head>
<body>
Click on a list item to select it.
<br>
<ul id="ul">
<li>Christopher Robin</li>
<li>Winnie-the-Pooh</li>
<li>Tigger</li>
<li>Kanga</li>
<li>Rabbit. Just rabbit.</li>
</ul>
<script>
ul.onclick = function(event) {
if(event.target.tagName != "LI") return;
//only going to be applied on lis
if (event.ctrlKey || event.metaKey) {
toggleSelect(event.target);
} else {
singleSelect(event.target);
}
}
ul.onmousedown = function() {
return false;
};//disables default mouse action like being selected
//as the task asked, PREVENT THE NATIVE BROWSER SELECTION
function toggleSelect(li){
li.classList.toggle('selected');
}//this one doesnt do much
function singleSelect(li) {
let selected = ul.querySelectorAll('.selected');
for(let elem of selected) {
elem.classList.remove('selected');
}//cancel the selection on ul i guess?
//it ALSO CANCELED PRE GROUP SELECTED LIS
//INICIATE THE FIELD
li.classList.add('selected');
//and limits the selected state only for li
}
</script>
</body>
</html>
댓글
댓글 쓰기