javascript 仅使类型上的元素可单击

xurqigkl  于 2023-04-04  发布在  Java
关注(0)|答案(2)|浏览(93)

我想选中复选框,而不触发警报。

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

我尝试了pointer-events:无和z索引:1000

y4ekin9u

y4ekin9u1#

试试这个

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

shyt4zoc2#

使用内联事件处理程序通常是not a good idea
使用event delegation代替。类似于:

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>

相关问题