Question

如何在不单击的情况下制作HTML元素？

每个元素都被JavaScript单击。单击元素将得到alert(this.id)。如何使parent2不可点击，但是里面的按钮允许您点击？

当然，我将有更多parent3，parent..4，其中div和表单都包含div。有没有简单的方法？

如果有一种方法可以单击父对象中的所有子元素，它将很有帮助。 Parent2，parent3 ...不是要单击，而是要在Parent2 ..，3 ...内部形成可点击状态

var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId;

for (var i = 0; i < divCount; i += 1) {
  div[i].onclick = function(e) {
    clickedDivId = this.id;
    event.stopPropagation();
    alert(this.id);
  };
}

#parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#parent2 {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#parent3 {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

<div id="parent">
  <div id="child"></div>
</div>

<div id="parent2">
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
</div>

<div  id="parent3">
<button id="button" type="button" onclick="alert('Hello world2!')">Click 
Me!</button>
</div>

Answer 1

不是将on-click事件附加到div上，而是仅将其放在按钮上，并且事件处理程序应实现警报和stopPropagation逻辑。

无需在onClick上附加任何div事件

您的代码应类似于

HTML

<div id="parent">
  <div id="child"></div>
</div>

<div id="parent2">
  <button id="myButton" type="button" onclick="buttonClicked(event)">Click Me!</button>
</div>

Javascript :

function buttonClicked(event){
      console.log('lklklk', event)
      event.stopPropagation();
      alert('Hello world!')

  }

Answer 2

为按钮添加ID或其他内容，然后使用e.target检查事件是否源自该事件。下面是代码段

document.addEventListener("click", function (e){if(e.target.id == "button") {alert("button clicked")}})

Answer 3

这将从您的onclick事件中排除parent2：

var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId;

for (var i = 0; i < divCount; i += 1) {
  if(div[i].id != "parent2"){ //<-- Only if div is not parent2
    div[i].onclick = function(e) {
      clickedDivId = this.id;
      event.stopPropagation();
      alert(this.id);
    };
  }
}

#parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#parent2 {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

<div id="parent">
  <div id="child"></div>
</div>

<div id="parent2">
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
</div>

尽管如此，我认为最好用一个类来解决这个问题：

var clickables = document.getElementsByClassName("clickMe")
var divCount = clickables.length;
var clickedDivId;

console.log(clickables);

for(let i=0; i<clickables.length; i++){
  clickables[i].onclick = function(e) {
    clickedDivId = clickables[i].id;
    event.stopPropagation();
    alert(clickables[i].id);
  };
}

 #parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#parent2 {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

<div id="parent">
  <div id="child" class="clickMe"></div>
</div>

<div id="parent2">
  <button class="clickMe" type="button">Click Me!</button>
</div>

Answer 4

如果您想让parent2 div不运行任何代码，只需在return时输入clickedDivId == "parent2"。

var allDivs = document.querySelectorAll("div");
var disDivs = document.querySelectorAll("div.dis");
var divCount = allDivs.length;


for (var i = 0; i < divCount; i += 1) {
  allDivs[i].onclick = function(e) {
    e.stopPropagation();
    if(this.className == 'dis')
      return;
    alert(this.id);
  };
}

#parent, #parent2, #parent3 {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

.dis{
  cursor:not-allowed
}

<div id="parent">
  <div id="child"></div>
</div>

<div id="parent2" class="dis">
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
</div>

<div  id="parent3" class="dis">
<button id="button" type="button" onclick="alert('Hello world2!')">Click 
Me!</button>
</div>

如果您有多个divs，则可以为他们分配一个类，然后在事件处理程序中检查该点击的div中是否存在该类

Answer 5

您可以向按钮添加一些CSS代码，例如：

button { 
  position: absolute;
  top: 0;
  left: 10px;
 }

使用此代码按钮可获得比父级更高的级别，记住父盒子必须有position:relative

如何使HTML元素不可点击？

5 个答案: