Geek asks and answers

How to detect a click under an overlapping element?

I have two HTML documents that b.htmlcontains c.htmlwith iframe.

In b.htmlI need to draw some DIV (in my example id = selector) that partially cover the content c.htmldisplayed in iframe.

I need to get the identifier of the DOM element corresponding to the mouse coordinate under the DIV selector.

Currently, using document.elementFromPoint()directly in c.htmlworks partially, since when the mouse is on the DIV selector, I cannot identify the DOM element of not reaching in c.html(in this example, DIV c).

I need to know:

  • Is it possible to select an item under another using document.elementFromPoint () or any other means?
  • What could be a possible alternative solution, possibly using the DOM and native API?

An example here (see console in Chrome):

http://jsfiddle.net/s94cnckm/5/

----------------------------------------------- b.html

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>B</title>
    <script type="text/javascript">
        window.app = {
            start: function () {
            }
        };
    </script>
    <style>
        #selector {
            position: absolute;
            top: 150px;
            left: 150px;
            width: 250px;
            height: 250px;
            -webkit-box-shadow: 0px 0px 0px 5px yellow;
            -moz-box-shadow: 0px 0px 0px 5px yellow;
            box-shadow: 0px 0px 0px 5px yellow;
        }

        #iframe {
            width: 500px;
            height: 500px;
            border: none;
        }
    </style>
</head>
<body onload="app.start();">
    <div id="selector">SELECTOR</div>
    <iframe id="iframe" src="c.html"></iframe>
</body>
</html>

----------------------------------------------- c.html

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>C</title>
    <script type="text/javascript">
        window.app = {
            start: function () {
                document.querySelector('body').addEventListener('mousemove', function (event) {
                //console.log(event.pageX, event.pageY, event.target.id);
                var item = document.elementFromPoint(event.pageX, event.pageY);
                console.log(item.id);
                }.bind(this));
            }
        };
    </script>
    <style>
        body {
            background-color: lightslategray;
        }

        #a {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: green;
            z-index: 2;
        }

        #b {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: #ffd800;
            z-index: 1;
        }
    </style>
</head>
<body onload="app.start();">
    <h1>Content</h1>
    <div id="a">a</div>
    <div id="b">b</div>
</body>
</html>
+1
source share
2 answers

A possible problem is to use pointer-events.

A CSS property pointer allows authors to control circumstances (if any), a specific graphic element can become the target of mouse events. When this property is not specified, the same characteristics of the visible Parnted value apply to SVG content.

When applying

#selector {
    /* ... */
    pointer-events: none;
 }

#selector . , , :hover click, .

css: http://jsfiddle.net/s94cnckm/6/

+1

, , (DIV.selector), , , ( document.elementFromPoint(x, y)), .

document.elementFromPoint() IE. , pointer-events IE.

:

http://jsfiddle.net/s94cnckm/14/

 document.getElementById('iframe').contentDocument.addEventListener('click', function (event) {
     alert(event.target.id);
 }.bind(this));

 document.getElementById('selector').addEventListener('click', function (event) {
     var selector = document.getElementById('selector');
     selector.style.display = 'none';
     var item = document.getElementById('iframe').contentDocument.elementFromPoint(event.pageX, event.pageY);
     selector.style.display = '';
     alert(item.id);
 }.bind(this));

pointer-events, , IE.

Internet Explorer -: ?

https://css-tricks.com/almanac/properties/p/pointer-events/

http://davidwalsh.name/pointer-events

http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

:

http://www.vinylfox.com/forwarding-mouse-events-through-layers/

+1

More articles:


All Articles