Verify the relationship between click event release and button state

When I was studying react synthesized events, I had this question: does JS’s native dispatchEvent method work at any time? Check it out for yourself and share the results (for record only, not reference)

Event casting is disabled only if the element setting property disabled=”disabled”, otherwise the click event casting is not affected

Button status:	Can the event throw send	Can mouse trigger
The original state	Square root	Square root
Display: none	Square root	x
Visibility: hidden	Square root	x
pointer-events:none	Square root	x
Overwritten by other elements	Square root	x
To hide a page	Square root	x
Out of sight	Square root	x
disabled=”disabled”	x	x

A few things to note:

Pointer-events: None Disables user clicks but does not affect event throwing
Display: None While removing elements from the Render Tree, it does not affect event rendering
The only way to disable event throwing: disabled: disabled (as far as I know)

First, the impact of different states of buttons on event throwing

1. Original state

Buttons have no attributes and are not covered. At this point, the button click event can be thrown, can be triggered by mouse click

2. Button display: None

Click events are still thrown

3. Button visibility: hidden

Click events are still thrown

4. The button is completely overwritten by other positioning elements

When the button is completely overridden with other elements, the mouse can no longer trigger the click event, but the click event is still successfully thrown

Change the opacity of the covering, the result remains the same.

5. The page is hidden (cut to another page)

Use the timer 6 seconds after the click event, refresh the page, cut to another page, 6 seconds after the cut back, the event is still thrown

6. Remove the button from the window

Use positioning to move the button out of the viewable area and click events can still be thrown

7. Button disabled = “disabled” — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — –

Click events are finally banned from Posting,Disabled is also the only way I’ve found so far to disable events from being thrown

8. Button pointer – events: none

The user can only be banned from clicking, and the cast is still executed

Second, conclusion: Only the element setting attribute disabled=”disabled”, throwing will be prohibited, other circumstances do not affect the click event throwing

3. Experiment code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div{
            background-color: # 000;
            width: 80px; height: 80px;
            /* position: relative; top: -30px; * /
        }
    </style>
</head>
<body>
    <button id="btn">Click on the button</button>
    <div id="div"></div>
</body>
<script>
    var btn=document.querySelector("#btn");
    btn.onclick=function(){console.log("Click"); }var newEvent=document.createEvent("MouseEvents");
    newEvent.initEvent("click".true.true);
    btn.dispatchEvent(newEvent);   
</script>
</html>
Copy the code

Postscript: This is my old CSDN blog, ID: little finger can’t press CTRL.