jquery.mobile 中的事件“tap”存在问题。当“点击”该项目时，该项目将被隐藏，它会触发位于该项目下方的输入字段上的事件“焦点”。 我怎样才能使焦点事件不被触发？ 这是一个小示例代码。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
.drop {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 100;
padding: 0 0 1px;
}
.drop .holder {
overflow: hidden;
padding: 10px 10px 3px;
margin: 0 24px -2px;
background: #1c365b;
}
a {font-size: 24px;}
</style>
</head>
<body>
<form action="#" id="form">
<input type="text" name="input 1">
<input type="text" name="input 2">
<input type="text" name="input 3">
</form>
<div class="drop">
<div class="holder">
<a>Link 1</a><br>
<a>Link 2</a><br>
<a>Link 3</a><br>
</div>
</div>
<div id="console"></div>
<script>
$(function () {
var console = $('#console');
$('.drop').find('a').unbind('tap').bind('tap', function (e) {
console.append(' tap on drop menu');
$('.drop').hide();
return false;
});
$('#form').find('input').unbind('focus').bind('focus', function (e) {
console.append(' focus on ' + $(e.target).attr('name'));
});
});
</script>
</body>
隐藏掉落后你会得到:
<div id="console">tap on drop menu focus on input 2</div>
stopImmediatePropagation() 方法没有帮助。
最佳答案
在 JSFiddle 中使用您的确切代码我不明白您遇到的问题。 我已经在桌面浏览器和我的 S3 上的 chrome 浏览器中尝试过此操作。
覆盖的 div 消失并触发点击事件，但焦点事件不会触发，直到您在覆盖消失后选择其中一个输入框。
我更改的唯一代码是删除事件代码中不必要的方法。
$(function () {
var console = $('#console');
$('.drop').bind('tap', function (e) {
console.append(' tap on drop menu');
$('.drop').hide();
return false;
});
$('#form').find("input").bind('focus', function (e) {
console.append(' focus on ' + $(e.target).attr('name'));
});
});
关于javascript - jquery.mobile "tap"触发了 "focus"事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15384011/