这里仅是一个示例,我认为我已经完成了带有或不带有箭头功能的功能,但仍然一无所获。因此,我需要在方法event.altKey中添加内容,但是如何像通常那样在没有类的情况下将'e'传递给它。
这里HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<head>
<meta charset="utf-8">
<style>
.selected {
background: #0f0;
}
li {
cursor: pointer;
}
</style>
</head>
</head>
<body>
Кликни на элемент списка, чтобы выделить его.
<br>
<ul id="ul">
<li>Кристофер Робин</li>
<li>Винни Пух</li>
<li>Тигра</li>
<li>Кенга</li>
<li>Кролик. Просто Кролик.</li>
</ul>
<script src="script.js"></script>
</body>
</html>
我认为这应该可以,但是没有用,这是JS
window.addEventListener('load', function(){
class List{
constructor(){
this.lists = document.querySelectorAll('li');
this.lists.forEach((list) => {
list.addEventListener('click', (event) => this.click_green);
list.addEventListener('onmousedown', (event) => this.no_select_text);
});
}
no_select_text(event){
event.preventDefault;
return false;
}
click_green(event){
if (event.ctrlKey || event.metaKey)
{
this.classList.add('selected');
return;
}
let allLists = this.parentNode.querySelectorAll('li');
allLists.forEach(function(list){
list.classList.remove('selected');
});
this.classList.add('selected');
}
}
new List;
});
解决您的问题
window.addEventListener('load', function () {
class List {
constructor() {
this.lists = document.querySelectorAll('li');
this.lists.forEach((list) => {
list.addEventListener('click', (event) => {
this.click_green(event)
});
list.addEventListener('onmousedown', (event) => {
this.no_select_text
});
});
}
no_select_text(event) {
event.preventDefault;
return false;
}
click_green(event) {
if (event.ctrlKey || event.metaKey) {
event.target.classList.add('selected');
return;
}
let allLists = event.target.parentNode.querySelectorAll('li');
allLists.forEach(function (list) {
list.classList.remove('selected');
});
event.target.classList.add('selected');
}
}
new List;
});