如何防止ul元素在单击时消失？ Javascript事件
你能把它放在JSFIDLE上吗？如何防止ul元素在单击时消失？ Javascript事件,javascript,addeventlistener,Javascript,Addeventlistener,你能把它放在JSFIDLE上吗？ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Javascript Events</title <style> ul { margin:0px auto; width:700px; height:600px; position:relative; cursor:pointer; bor
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Events</title
<style>
ul {
margin:0px auto;
width:700px;
height:600px;
position:relative;
cursor:pointer;
border:black;*/
}
li {
width:200px;
height:200px;
background:black;
display:inline-block;
}
#red {
background:red;
}
#green{
background:green;
}
#blue {
background:blue;
}
#orange{
background:orange;
}
#purple{
background:purple;
}
#pink {
background:pink;
}
#silver {
background:silver;
}
#gold{
background:gold;
}
#black {
background:black;
}
</style>
</head>
<body>
<ul id="grid">
<li alt="red1" class="red" id='red' ></li>
<a href="http://www.google.com"><li id="orange"></li></a>
<li id="silver"></li>
<li alt="green machine" id="green"></li>
<li id="gold"></li>
<li id="purple"></li>
<li id="pink" alt="pink"></li>
<li id="blue"></li>
<li id="black"></li>
</ul>
donut.addEventListener('click',function(e){
//Prevents the href
e.preventDefault();
**How do I stop it from selecting the ul tag**
//Stops it from deleting all squares
var howmany = this.querySelectorAll('li').length;
if (howmany > 1 ) {
console.log(e);
var removeTarget = e.target;
removeTarget.remove(e.target);
}
}
, false);
/*var tomato = document.getElementById('grid')
tomato.addEventListener('click', function(e){
console.log("Clicked inside the UL");
e.preventDefault();} , false);*/
/*var nachos = document.getElementById('pink')
nachos.addEventListener('click', function(e) {
console.log(e.toElement);
e.stopPropagation();
} , false);*/
}
</script>
</body>
</html>
var donut = document.querySelector('#grid');
donut.addEventListener('click', function (e) {
e.preventDefault();
if (e.target.tagName === 'LI') {
e.target.remove();
}
} , false);