个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在创建跟踪用户鼠标指针并在单击时与 div 元素交互的 Web 小程序时遇到问题。
工作正常，直到我在小程序上方添加一个新部分。当我尝试点击任何可定位 div 的应用程序部分内的任何内容时，我得到:
Uncaught TypeError: Cannot read property 'id' of null demo.js:27
(anonymous function) demo.js:27
x.event.dispatch jquery.min.js:5
v.handle jquery.min.js:5
当我从页面顶部删除新部分时，一切正常。
This fiddle 重现了错误，但无论是否有附加部分，它都是如此。这也很奇怪。
代码:
$(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>最佳答案
对 http://jsfiddle.net/gv8qv43b/4/ 做了一些改动:
pointer-events: none; 在 #phone 上，这样当您点击时，它会通过 #phone 到达它后面的元素。 $("#outer > div").click() 所以只有点击 #thing 才有效果。 (#phone 包含在选择器中，但如上所述，它不能接收点击。)var elem = this;。让浏览器完成繁重的工作并找出您点击的内容。不需要 elementFromPoint()。关于jquery "cannot read propery ' id' of null"when tracking event.pageX+Y，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26209068/
25
4
0
我正在努力掌握 perl。我正在尝试编写一些脚本作为调度模拟器。 FCFS、SSTF 和 Scan and Look 我有一个包含 block 请求列表的数组，另一个用作缓冲区。首先，我将复制第一个请
假设我正在ng-repeat处理images，它是一个包含src 和 的对象数组>标题属性。 var images = [ {src: 'a.jpg', caption: 'a'}, {src
“git branch --track”和“git checkout -b --track”之间有什么区别，如果有的话？ 最佳答案 内部 git-branch 被调用，然后新分支被 check out
我在自定义 Android Switch 小部件的外观时遇到问题。我有自定义的 xml 可绘制对象，我想将其用于拇指(通常显示开或关的小按钮部分)和轨道(拇指滑过的背景)。当我使用 android:t
文档有点太简单了，我无法完全理解 A controller thus effectively has three modes of operation, determined by whether i
已在 Google Analytics(分析)帮助论坛中发布此内容，但无人能提供帮助。希望我在这里有更多的运气......: 我对我的网页使用 Google Anlaytics 异步跟踪。像个魔法一样
我有一个简单的ng-repeat，其中track by表达式不起作用。这是Fiddle . {{n}} 生成的标记“track”是表达式 [[1,2,3,4,5,5,5,5] track
我想使用 Spotify iOS SDK 从选定的播放列表中获取轨道。但它总是不返回我的数组中的任何项目。我正在使用以下代码来获取轨道: [SPTPlaylistSnapshot playlistWi
我正在尝试将一维数组分配给我的默认构造函数，但我不断收到此错误消息。有没有办法为同一个类创建两个默认构造函数，一个不带参数，一个带参数？ 标题 #include #include using na
问题中的答案Android play console: internal testing version, close testing ? how does it works?说: End users
也许有人可以告诉我如何在 Switch() 中设置 Track Width、Track StrokeWidth、Thumb Diameter 的大小 Switch(
我有一个适用于 Android 和 iOS 的移动应用，两者都是使用 Xamarin 构建的。 Android - 该应用会上传到 Beta 轨道 上的 Play 商店，测试完成后，就会升级到生产轨道
我在我的 http 请求中发送一个 Json 格式的用户实体，如下所示: POST http://localhost:52054/api/Authentication/DeleteAccessToke
我正在研究 Java 类介绍的最终项目。该项目的一部分涉及从 MusixMatch using their API 获取歌词片段。我可以使用 track.lyrics.get 从 API 获取歌词，但
我将 ASP.NET Core 与 EFCore 2.0.3 和 Automapper 6.2.2 一起使用 这是我的模型: public class StudentClass {
所以我同时使用 react-native-video 和 react-native-track-player，通常两者都工作正常，但是要使用视频播放器的一些额外功能，比如缓冲，我必须使用 Exo pl
有时我听到人们讨论跟踪编程错误的好处，如果不是为了提高对常见错误的认识的话。我已经开始保留我在代码中发现的错误列表，以及可能导致这些错误的原因。我的主要问题是: 我应该保留哪些与我的错误相关的信息 跟
可以对卡尔曼滤波器更新的估计值应用上限和下限约束吗？ 我有一种在实际生活中只能有非负值的状态。当我应用卡尔曼滤波器时，此状态会更新为具有负值。如何在卡尔曼滤波器中应用此限制约束？ 请回复 谢谢 最佳答
我正在构建一个使用Sendgrid Marketing Email API的应用程序，目的是发送新闻通讯。它具有许多文章链接，还包括横幅广告和其他服务链接。我们显然希望继续跟踪文章链接，但要排除其他链
我所在的团队管理着许多软件项目 - 我们所做的大部分工作都是端到端的，从需求跟踪到项目管理再到采购和设置 - 财务跟踪是我们的一大难题我们的财务有一个完整的过程。目前我们使用电子表格并将所有发票和采购
我是一名优秀的程序员,十分优秀！