我有一个使用jquery工作的子导航 - 用户点击顶级列表项,例如触发下拉列表的'services'.通过单击"服务"链接切换下拉菜单.我做到了这一点,用户可以点击屏幕上的任意位置将下拉菜单切换到关闭状态.但是,由于网站响应,我希望用户能够点击(触摸)屏幕上的任何位置来关闭下拉列表但我的问题是它不能在触摸设备上工作.
我为代码文档设置的代码是:
$(document).click(function(event) {
if ( $(".children").is(":visible")) {
$("ul.children").slideUp('slow');
}
});
Run Code Online (Sandbox Code Playgroud)
我假设document.click可能无法在触摸设备上运行,如果没有,有什么解决方法可以实现相同的效果?
谢谢
当我使用jQuery进行简单的点击事件时,它只适用于链接.有没有办法让它适用于跨度等:
$("span.clicked").live("click", function(e){alert("span clicked!")});
$("a.clicked").live("click", function(e){alert("link clicked!")});
Run Code Online (Sandbox Code Playgroud)
SPAN适用于Safari但不适用于Mobile Safari(在iPhone或iPad上),而A标签适用于两者.
我们有一个Web应用程序,它使用Jquery blockUI来打开弹出窗口并执行一些操作.所有这一切在Safari上运行良好,IE 8问题在于Ipad.弹出窗口中的所有操作都没有响应.它只停留在那个页面上.即便关闭也行不通.我们需要添加其他东西吗?这是打开页面并单击事件以进行关闭的代码.
<script>
$(document).ready(function() {
$.ajaxSetup( {
cache:false
});
$("#sendInviteDiv").load("invite.htm?action=view&pid="+pid);
$.blockUI({ message: $('#sendInviteDiv'),
centerY: 0,
css: {
top: ($(window).height() - 550) /2 + 'px',
left: ($(window).width() - 870) /2 + 'px',
width: '870px'
}
});
//var ua = navigator.userAgent;
//var event = (ua.match(/iPad/i)) ? "touchstart" : "click";
//alert(ua);
$('#closeInvite').click($.unblockUI);
$('#inviteBtn').click(function() {
//script to load
//setPositionDetails('${formName}','inviteBtn');
});
}
});
</script>
Run Code Online (Sandbox Code Playgroud)
感谢指针.
启用了javascript,并在Ipad Safari设置中允许弹出窗口.
我从这个问题中找到了检测div外部点击的一个很好的答案:如何检测元素外的点击?,这非常有效.
但我注意到,在测试我的网站时,如果我在元素外面点击它,它在iPhone上不起作用.
这是代码(直接从该答案中获取)
$('html').click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
Run Code Online (Sandbox Code Playgroud) 我在网站上添加了一些简单的javascript:
jQuery(document).click(function(){
alert('click');
});
Run Code Online (Sandbox Code Playgroud)
...当有人点击实际的锚元素,按钮元素或使用cursor: pointer;CSS 时,它只会在iOS中触发.
具体来说,我通过Bootstrap 3固定导航栏菜单看到了这一点.当它打开时,我添加了:
jQuery(document).click(function(){
jQuery('#navbar-collapse.collapse.in').collapse('hide');
});
Run Code Online (Sandbox Code Playgroud)
无论用户点击何处,都能确保关闭.
这在iOS中无效(在iPhone 4,iPhone 6/6 +和iPad上验证).
似乎jQuery点击事件仅在"可点击"元素(A,BUTTON等)或具有cursor: pointer;CSS onClick='...something...'或甚至或onClick=''HTML属性的元素上注册 .
所以,我的问题.这只是我吗?有没有人看到这个?
我有一个简单的点击事件附加到我的网络应用程序上的许多锚点.
$('a.heading').live("click", function(e) {
e.preventDefault();
//do my stuff
});
Run Code Online (Sandbox Code Playgroud)
这不是火箭科学.但是在我的iPhone上,点击没有注册.它似乎使用iPhone的触摸处理程序(iPad,Android等都很好).
我已经看过几个教程,但似乎无法理解它.有没有一个我可以使用的内容,jQuery通常擅长?
当您单击.menuButtonjquery时,将添加一个名为的类active。此Jquery代码可在Windows和Android上运行,但iOS除外(已通过Chrome和Safari测试)。
HTML5
<div class="menuButton">
Menu Button
</div>
<div class="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Something</a></li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
jQuery的
var removeClassVar = true;
$('.menuButton').on('click', function() {
$('.navmenu').toggleClass('active');
removeClassVar = false;
});
$('.navmenu').on('click', function() {
removeClassVar = false;
});
$(document).on('click', function() {
if (removeClassVar == true) {
$('.navmenu').removeClass('active');
}
removeClassVar = true;
});
Run Code Online (Sandbox Code Playgroud)
CSS3
.menuButton {
display:block;
cursor:pointer;
}
.navmenu {
display:none;
}
.navmenu.active {
display:block;
}
Run Code Online (Sandbox Code Playgroud)
问题:单击.menuButton菜单时将显示,但是单击html菜单时将不运行removeClass('active')。仅在iOS上会出现此问题。
JsFiddle:https://jsfiddle.net/dkg7tyu0/
更新的JSFiddle:https …