Question

我遇到了创建一个跟踪用户鼠标指针并在点击时与div元素交互的网络小程序的问题。

直到我在applet上方添加新部分时才能正常工作。当我尝试点击任何可定位div上的应用程序部分内的任何内容时，我得到：

未捕获的TypeError：无法读取null demo.js：27
的属性“id”
（匿名函数）demo.js：27

x.event.dispatch jquery.min.js：5

v.handle jquery.min.js：5

当我从页面顶部删除新部分时，一切正常。

这个小提琴重新创建了错误，但无论是否有附加部分都会这样做。这也很奇怪。

代码：

$(document).ready(function () {
    $("#phone").css('display', 'none');

    $("#outer").mouseenter(function () {
        $("#phone").fadeIn('fast', 0);
    });

    $("#outer").mousemove(function (event) {

        var parentOffset = $("#outer").offset();
        var relX = event.pageX - parentOffset.left;
        var relY = event.pageY - parentOffset.top;

        var phone = $("#phone");

        relX = relX - (phone.width() / 2);
        relY = relY - (phone.height() / 2);

        phone.css("left", relX + 'px');
        phone.css("top", relY + 'px');
    });

    $("#phone").click(function (event) {
        var phone = $("#phone");
        phone.css('display', 'none');
        var elem = document.elementFromPoint(event.pageX, event.pageY);
        console.log('Clicked: ' + elem.id);
        phone.css('display', 'block');
    });

    $("#outer").mouseleave(function () {
        $('#phone').fadeOut('fast', 0);
    });
});

#top-bg {
    position: relative;
    width: 100%;
    height: 700px;
    background: center center no-repeat;
    background-color: #000000;
    overflow: hidden;
}
#top-bg .landingtext {
    width: 380px;
    position: absolute;
    top: 30%;
    right: 15%;
}
#outer {
    position: relative;
    width: 100%;
    height: 700px;
    background: center center no-repeat;
    background-color: #eff0f2;
    overflow: hidden;
}
#thing1 {
    left: 50%;
    top: 112px;
    margin-left: 280px;
    position: absolute;
    width: 125px;
    height: 150px;
    background-color: green;
}
#thing2 {
    left: 50%;
    top: 265px;
    margin-left: 195px;
    position: absolute;
    width: 120px;
    height: 140px;
    background-color: blue;
}
#thing3 {
    left: 50%;
    top: 410px;
    margin-left: 35px;
    position: absolute;
    width: 252px;
    height: 85px;
    background-color: yellow;
}
#thing4 {
    left: 50%;
    top: 475px;
    margin-left: 220px;
    position: absolute;
    width: 155px;
    height: 150px;
    background-color: red;
}
#thing5 {
    right: 50%;
    top: 400px;
    margin-right: 20px;
    position: absolute;
    width: 110px;
    height: 205px;
    background-color: cyan;
}
#thing6 {
    right: 50%;
    top: 400px;
    margin-right: 140px;
    position: absolute;
    width: 112px;
    height: 205px;
    background-color: grey;
}
#thing7 {
    right: 50%;
    top: 400px;
    margin-right: 270px;
    position: absolute;
    width: 112px;
    height: 205px;
    background-color: purple;
}
#thing8 {
    right: 50%;
    top: 397px;
    margin-right: 400px;
    position: absolute;
    width: 112px;
    height: 208px;
    background-color: pink;
}
#phone {
    position: relative;
    width: 170px;
    height: 381px;
    background-color: #2858b9;
    opacity: 1;
    cursor: crosshair;
    background-size: 100%;
    z-index: 1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
    <!-- Section: intro -->
    <section id="top-bg">
        <div class="landingtext">
             <h1>Make paper come to life</h1>

             <h3>with Interactive print by ori</h3>

        </div>
    </section>
    <!-- /Section: intro -->
    <!-- Section: demo -->
    <section id="examples">
        <div id="outer">
            <div id="phone"></div>
            <div id="thing1">Thing 1</div>
            <div id="thing2">Thing 2</div>
            <div id="thing3">Thing 3</div>
            <div id="thing4">Thing 4</div>
            <div id="thing5">Thing 5</div>
            <div id="thing6">Thing 6</div>
            <div id="thing7">Thing 7</div>
            <div id="thing8">Thing 8</div>
        </div>
    </section>
    <!-- /Section: demo -->
</body>

Answer 1

对http://jsfiddle.net/gv8qv43b/4/进行了一些更改：

removeInvalidPlayers在pointer-events: none;上点击，当您点击时，它会通过#phone到其后面的元素。
#phone所以只需点击$("#outer > div").click()即可生效。（#thing包含在选择器中，但如上所述，它无法接收#phone。）
click。让浏览器完成繁重工作，找出你点击的内容。不需要var elem = this;。

Jquery＆＃34;无法阅读财产＆＃39;＆＃39; of null＆＃34;跟踪event.pageX + Y时

1 个答案: