如何使HTML元素不可点击？ [英] How to make an HTML element unclickable?

问题描述

如何不单击而制作HTML元素？

每个元素都被JavaScript单击。单击该元素将得到 alert（this.id）。如何使 parent2 不可点击，但其中的按钮允许您单击？

我当然会有更多的 parent3 ， parent..4 里面有div和表格。有没有简单的方法？

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

  var div = document.getElementsByTagName（ div）; var divCount = div.length; var clickedDivId; for（var i = 0; i 
 

  #parent {width：450px;高度：170像素；边距：10px;填充：10px; background-color：blue;}＃parent2 {width：450px;高度：170像素；边距：10px;填充：10px; background-color：blue;}＃parent3 {width：450px;高度：170像素；边距：10px;填充：10px;背景颜色：蓝色；}＃child {宽度：430px；高度：70px；边距：10px;向左飘浮;背景颜色：红色；}  

 < div id = 父母> < div id = child>< / div>< / div>< div id = parent2> < button type = button onclick = alert（'Hello world！'）>点击我！< / button>< / div>< div id = parent3>< button id =  button type = button onclick = alert（'Hello world2！'）>点击我！< / button>< / div>  

解决方案

而不是在点击时附加 div事件仅将其置于按钮上，并且事件处理程序应实现警报和 stopPropagation 逻辑。

不需要在 div

您的代码上附加任何 onClick 事件应该像

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：

 功能buttonClicked（event）{
 console.log（'lklklk'，event）
 event.stopPropagation（）; 
警报（ Hello world！）
 
} 
  

How to make the HTML element without clicking?

Each element is clicked by JavaScript. Clicking on the element gets the alert(this.id). How do I make parent2 not clickable, but the button inside allows you to click?

Of course I will have more parent3, parent..4 with div inside and forms. Is there a simple way?

It will help if there is a way to click it all within the parent(childs). Parent2, parent3 ... not to click, but form inside Parent2..,3..to be clickable

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>

解决方案

instead of attaching on-click event on div put it on button only and that event handler should implement alert and stopPropagation logic.

No need to attach any onClick event on div

You Code should be like

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!')

  }

这篇关于如何使HTML元素不可点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！