How to set non-clickable in html

In HTML, you can use the pointer-events attribute to achieve the non-clickable effect of the element by setting the mouse event of the element to invalid. You only need to set the "pointer-events:none;" style to the element.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

htmlSet non-clickable

Make the element non-clickable by setting the pointer-events attribute of the element to none. This method makes the element unclickable by setting the mouse event of the element to invalid.

css code:

.disable {
	pointer-events: none;
}

Example:

const disabled = true;
<Button className={disabled ? &#39;disabled&#39; : null}>点击</Button><style>
  .disabled {
      pointer-events: none;
      // 设置pointer-events: none;再设置cursor是没有效果的
  }</style>

Rendering:

##Note:

• When the value of pointer-events is none, if the element is absolutely positioned, the element below it can be selected.

• pointer-events: none; It is only used to disable mouse events. Events bound by other methods will still be triggered, such as keyboard events, etc.

• If the pointer-events of a child element of an element is set to another value (for example: auto), then when the child element is clicked, the parent element will still be triggered by event bubbling. event.

(Learning video sharing:

css video tutorial, "html video tutorial")

The above is the detailed content of How to set non-clickable in html. For more information, please follow other related articles on the PHP Chinese website!