我在使用 jQuery 时遇到了一个奇怪的问题。我在页面上有一组按钮,当长按时,它们会在按钮的位置弹出一个输入框。这是小提琴。
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;
});
如果在小提琴中运行,唯一的问题是盒子的位置(我是否错误地获得了左侧和顶部的位置?),但是当我在实际的网络应用程序(在 Safari 中)上进行测试时,长时间后出现以下错误点击log,出现无输入框:
TypeError:'undefined' 不是 'in' 的有效参数(评估 't in e')
在
jQuery.min.js:5
所以这是一个由两部分组成的问题(重点是第 1 部分):
- 为什么我会收到此错误(是错误吗?),我该如何解决?
- 如何将输入框设置到正确的位置?
编辑
正如评论中所建议的,我换成了jquery.min.js
,jquery.js
并且有一个更容易调试的错误:
TypeError:'undefined' 不是 'in' 的有效参数(评估 '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 属性?