- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在使用 jQuery 时遇到了一个奇怪的问题。我在页面上有一组按钮,当长按时,它们会在按钮的位置弹出一个输入框。 <强> Here's the fiddle.
HTML
<div class="popupView" id="recoveryView">
<button class="intervalBtn" type="button" name="recovery0" id="recovery0">00:30</button>
<button class="intervalBtn" type="button" name="recovery6" id="recovery6">00:35</button>
<button class="intervalBtn" type="button" name="recovery1" id="recovery1">02:00</button>
<button class="intervalBtn" type="button" name="recovery7" id="recovery7">03:00</button>
<button class="intervalBtn" type="button" name="recovery2" id="recovery2">04:00</button>
<button class="intervalBtn" type="button" name="recovery8" id="recovery8">05:00</button>
</div>
<input id="edit_interval" type="text" />
CSS
.popupView {
background: #999999;
-webkit-border-radius: 6px;
-webkit-box-shadow: 0 0 4px #333333;
width: 30%;
height: 70%;
position: absolute;
}
.intervalBtn {
color: blue;
background: #CCCCCC;
-webkit-border-radius: 6px;
width: 41%;
height: 12.5%;
float: left;
margin-left: 6%;
margin-top: 3%;
font: 12pt sans-serif;
}
.recoveryBtn {
color: blue;
background: #CCCCCC;
-webkit-border-radius: 6px;
width: 88%;
height: 12.5%;
float: left;
margin-left: 6%;
margin-top: 3%;
font: 12pt sans-serif;
}
.intervalBtn.selected, .recoveryBtn.selected {
color: #CCCCCC;
background: blue;
}
body {
position:absolute;
overflow: hidden;
bottom: 0;
left: 0;
right: 0;
top: 0;
user-select: none;
-moz-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body > div {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#edit_interval {
display: none;
position: absolute;
}
JavaScript
$(".intervalBtn").click(function () {
$(".intervalBtn").removeClass("selected");
$(this).addClass('selected');
}).mouseup(function () {
clearTimeout(pressTimer);
return false;
}).mousedown(function () {
// Set timeout
pressTimer = window.setTimeout(function () {
console.log("interval button long click");
$("#edit_interval").css("display", "block").css("left", $(this).position().left).css("top", $(this).position().top);
}, 1000)
return false;
});
如果在 fiddle 中运行,唯一的问题是盒子的位置(我是否错误地获得了左侧和顶部的位置?),但是当我在实际的网络应用程序(在 Safari 中)上测试时,我得到以下错误长按日志后出现无输入框:
TypeError: 'undefined' is not a valid argument for 'in' (evaluating 't in e')
在
jQuery.min.js: 5
所以这是一个由两部分组成的问题(重点放在第 1 部分):
编辑
按照评论中的建议,我将 jquery.min.js
换成了 jquery.js
,并且出现了一个更容易调试的错误:
TypeError: 'undefined' is not a valid argument for 'in' (evaluating 'name in style')
第 6643 行。这是来自 jQuery.js
的代码:
// return a css property mapped to a potentially vendor prefixed property
function vendorPropName( style, name ) {
// shortcut for names that are not vendor prefixed
if ( name in style ) { //<---This is the line that causes the error
return name;
}
// check for vendor prefixed names
var capName = name.charAt(0).toUpperCase() + name.slice(1),
origName = name,
i = cssPrefixes.length;
while ( i-- ) {
name = cssPrefixes[ i ] + capName;
if ( name in style ) {
return name;
}
}
return origName;
}
这是否意味着 jQuery 找不到 CSS 属性 left 和 top?
最佳答案
对于问题的第 2 部分,您的 this
不是您期望的 this
,因为它在 window.setTimeout()
范围内功能。您需要在 setTimeout()
的范围之外获取对 this
的引用(或者只是被点击元素的位置)。相关代码如下。我更新了你的 fiddle here .请注意 position函数不考虑边距或填充。
var pos = $(this).position();
// Set timeout
pressTimer = window.setTimeout(function()
{
console.log("interval button long click");
$("#edit_interval").css({"left": pos.left + 'px', "top": pos.top + 'px'}).show();
},1000)
return false;
关于javascript - jQuery 代码适用于 JSFiddle,但不适用于我的网络应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16068281/
首先给大家介绍一个很好用的学习地址:https://cloudstudio.net/columns 今天,我们的主要任务是按照既定的流程再次运行模型,并将其成功加载到 Web 应用程序中,以便通过
什么是 Web 服务(Rmi、ejb、soap)? Web服务和Web应用程序有什么区别?是否可以在 Web 应用程序中实现 Web 服务? 最佳答案 Web 服务是一种传输/公开信息的方式,使得可以
典型的 J2ee web 应用程序或任何基于 java 构建的 web 应用程序是多线程应用程序,所以每次我编写一些代码时我都必须牢记竞争条件或并发修改? 最佳答案 Is a typical J2ee
我正在将 google 登录集成到我的网络应用程序中。我按照 here 的说明进行操作。但我无法从登录中获取任何用户信息。不过,登录按钮工作得很好。 我使用这些 JavaScript 函数: i
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
是否有通用 cookie 或其他方式可以检查用户是否登录到谷歌应用程序。然后,如果是这样,我想运行一些 js。如果我知道通常在 Google 应用程序/服务中使用的 cookie 的名称,我就可以读取
我正在尝试以 Web 应用程序样式展示我的记事卡。我不担心缓存或让它离线工作。 我只想让它在 iOS 浏览器中呈现良好。这是链接:http://kaninepete.com/flashcard/rev
我正在使用 bootstrap 制作响应式网络应用。 我开始在我的网站上使用导航栏和表单进行一些测试,问题是 android 中的导航栏,因为它以全宽度呈现(如桌面 View ),而 chrome(对
我正在尝试使用 http://zxing.appspot.com/scan从 WebApp 调用 Barcode Scanner,但我无法让它工作。即使在不必要地更新和重新安装之后,它所做的只是显示默
在 WebStorm 中运行 Dart Web 应用程序时,?底部的 Pane 报告以下内容(--port 因运行而异): /home/tom/dart-sdk/bin/pub serve web -
由于某些原因,我的网络应用程序的路径似乎有问题。 我在 Eclipse 中的 WEB-INF 路径如下: Project --src -- main --webapp
Apps 脚本最近已将 StackDriver 日志移至 Apps Script dashboard ,“执行”页面。 问题是,日志不会显示在 Apps 脚本 Web 应用程序的仪表板中。当我向 Ap
身份验证后,我将用户权限标识符放入用户 session 中。如何根据用户权限限制对网站某些部分的访问。现在我正在检查页面处理程序中的权限,但如何改进? 是否有任何现有的模板可以做到这一点?能举个例子吗
我打算用 GUI 前端编写一个网络应用程序,大概使用 GTK。 我对 GTK(以及一般的 GUI 编程)完全陌生。我目前的猜测是使用两个线程,一个处理网络,另一个运行 GTK 前端。 这是解决此类问题
我一直在办公室工作,我们有一些数据需要处理几次。我的意思是数百行,有时每行中有非常大的文本 block 。为我们的客户说出食谱,其中包含 ID、名称、类别、食谱本身、时间…… 问题是我们需要经常处理和
当谈到使用官方 web SDK 的 Firestore 缓存时,它是否优化了读取以便仅当文档在上次读取后发生更改时才向服务器“发送”读取请求? (因此每次尝试不会生成 1 次额外的文档读取) 为了详细
我开发了一个使用 Jquery 移动框架的移动网络应用程序...我的主页我添加了一个 div,其中包含一些关于谁浏览我的网站 android 设备的说明... Some instructi
我就是这么想的,不知道是不是我 react 慢了。 通常,我将正在编辑的项目的 ID 存储在隐藏字段中。然后在后端(顺便说一句,我正在使用 PHP/Zend Framework),我用它来确定要编辑的
我有一些应用创意想免费发布(带广告)。我是一名 Web 开发人员,目前不想学习 Java/Objective C。我可以轻松地将想法构建到 HTML 5 在线应用程序中。 有什么原因我不能使用 Pho
我正在编写一个网络套接字应用程序,我打算使用 Azure 网络应用程序将其托管在云上。 Web 套接字是使用相当标准的 Owin 中间件实现的,并且在前 100 秒内功能齐全。这段时间之后,webso
我是一名优秀的程序员,十分优秀!