locked
Empty div can not fire event.

    Question

  • Hi, 

    Please help me to analyze the issue:

    Firstly, I create an empty div(just set width/height/position properties) and bind its onclick event to a function. The onclick event can be fired normally. 

    The demo code is simple:

    <!--default.html-->
    <!--...-->
    <div id ="cover" style =" right:100px;  width:400px; height:300px; ></div>
    <!--...-->


    //default.js

    //... document.body.querySelector("#cover").addEventListener("click", function (e) { //do something }); //...


    Then, I create a video tag, make the div and the video overlapped. Here the onclick event of div does not work any more. I am sure I have set the z-index properties of the two elements.

    Demo code:

    <!--default.html-->
    <!--...-->
    <div id ="cover" style =" right:100px;  width:400px; height:300px; "></div>
    <video id ="dd" width="400" height="300" src ="/videos/1.mp4" controls style =" right:100px;  width:400px; height:300px;"></video>
    <!--...-->
    //default.js
    //...
    document.body.querySelector("#cover").addEventListener("click", function (e) {
        //do something
    });
    //...

    And then, I set the background-color and opacity properties of the div, the onclick event works normally again.

    Demo code:

    <!--default.html-->
    <!--...-->
    <div id ="cover" style =" right:100px;  width:400px; height:300px;background-color:red;opacity:0;"></div>
    <video id ="dd" width="400" height="300" src ="/videos/1.mp4" controls style =" right:100px;  width:400px; height:300px;"></video>
    <!--...-->

    //default.js
    //...
    document.body.querySelector("#cover").addEventListener("click", function (e) {
        //do something
    });
    //...








    • Edited by Lattimore Monday, April 22, 2013 3:45 AM
    Monday, April 22, 2013 3:24 AM

Answers

  • The div element has to have content for it to be interactive. The background-color is forcing the DOM to "create" a rectangle which can then be interactive with the user.

    You could trick the system and set your opacity to 0.01 so the user will have a hard time seeing it.

    • Marked as answer by Lattimore Tuesday, April 23, 2013 8:59 AM
    Monday, April 22, 2013 1:28 PM

All replies

  • I can not add absolute position and z-index styles of the div and video elements when adding code to this question.  Please pay attention to it.






    • Edited by Lattimore Monday, April 22, 2013 3:46 AM
    Monday, April 22, 2013 3:37 AM
  • You can add z-Index in your HTML code, but the DOM is creating the empty DIV first, then the video element is created directly over that. So the div should NOT be working. The last created element in your example will be "in-front" of the previous elements, unless you dynamically change the z-Index in your javascript.

    Just switch the 2, then you should get what your looking for.

    Monday, April 22, 2013 6:08 AM
  • I am sure I have set z-index of the two element. But the code embed in the question can not display them. 

    Here is a screenshot of the demo code I test, as you say, I reverse the order of div and video, but the onclick event does not work. Unless I set 'background-color' property of the div.



    • Edited by Lattimore Monday, April 22, 2013 7:32 AM
    Monday, April 22, 2013 7:29 AM
  • The div element has to have content for it to be interactive. The background-color is forcing the DOM to "create" a rectangle which can then be interactive with the user.

    You could trick the system and set your opacity to 0.01 so the user will have a hard time seeing it.

    • Marked as answer by Lattimore Tuesday, April 23, 2013 8:59 AM
    Monday, April 22, 2013 1:28 PM
  • Hi,

    Thanks for your suggestion and it works well. 

    According to what you said, "The background-color is forcing the DOM to 'create' a rectangle which can then be interactive with the user.", I can not understand why the empty div I firstly created can fire event. The div is empty, has no content, but it can fire event. In other words, it is interactive.

    And why after I add the video element, the interactive empty div will be non-interactive. 


    • Edited by Lattimore Tuesday, April 23, 2013 9:09 AM
    Tuesday, April 23, 2013 8:59 AM