使类型上的唯一元素可点击

Question

我想在不触发警报的情况下勾选复选框。

<div onclick="alert('test')">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
<input type="checkbox">
</div>

我已经尝试了pointer-events: none和z-index: 1000

Answer 1

试试这个;

const checkbox = document.getElementById('myCheckbox')
const div= document.getElementById('myDiv')
var checkboxPrevState=checkbox.checked;
div.addEventListener('click',(event)=>{
var checkboxCurrentState=checkbox.checked;
if(checkboxPrevState==checkboxCurrentState){
alert("test");
}
else{
checkboxPrevState=checkboxCurrentState;
}
})

<div id="myDiv">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
<input id="myCheckbox" type="checkbox">
</div>

Answer 2

使用内联事件处理程序通常不是一个好主意。

请使用事件委托。比如:

document.addEventListener(`click`, handle);
function handle(evt) {
if (+evt.target.dataset.clickable === 1) {
evt.target.dataset.nclicks = +evt.target.dataset.nclicks + 1;
console.clear();
console.log(`You clicked ${evt.target.dataset.nclicks} times!`);
}
}

<div data-clickable="1" data-nclicks="0">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
<div><input type="checkbox"> check me</div>
</div>