JavaScript子菜单在iPhone iOS 5更新后不再工作
JavaScript submenu doesn't work anymore after iPhone iOS 5 update
我有一个javascript菜单,在Firefox, IE, Safari和iPhone/iPad iOS 4上运行良好。
只有在iOS 5更新中,子菜单会非常短暂地显示,然后在菜单项被点击后消失。有人知道他们改变了什么,我怎么能解决这个问题吗?
var dbMenu = {
init: function(){
var uls = document.getElementsByTagName('ul');
for(var i = 0; i < uls.length; i++){
if(uls[i].className.search(/'bdbMenu'b/) == -1)
continue;
var menu = uls[i];
dbMenu.styleSubMenus(menu);
addEvent(menu, 'mouseover', dbMenu.hover, false);
addEvent(menu, 'mouseout', dbMenu.hoverOff, false);
if(menu.className.search(/'bonMouse'b/) == -1){
addEvent(menu, 'click', dbMenu.click, false);
}
addEvent(menu, 'click', dbMenu.nav, false);
}
},
hover: function(e){
var target = (window.event)? window.event.srcElement : (e)? e.target : null;
if(target){
target = dbMenu.getTarget(target, 'li');
if(!target) return;
}else{
return;
}
target.className += ' hover';
var t = (target.className.search(/'bsubMenu'b/) != -1)? target : (target.parentSubMenu)? target.parentSubMenu : null;
if(!t) return;
clearTimeout(t.timeout);
if(target.parentMenu.className.search(/'bonMouse'b/) != -1){
t.className += ' click';
}
},
hoverOff: function(e){
var target = (window.event)? window.event.srcElement : (e)? e.target : null;
if(target){
target = dbMenu.getTarget(target, 'li');
if(!target) return;
}else{
return;
}
target.className = target.className.replace(/hover/g, '');
if(target.parentMenu.className.search(/'bonMouse'b/) != -1){
var t = (target.className.search(/'bsubMenu'b/) != -1)? target : (target.parentSubMenu)? target.parentSubMenu: null;
if(!t) return;
t.timeout = setTimeout(function(){ t.className = t.className.replace(/click/g, ''); }, 80);
}
},
click: function(e){
if(window.event){
window.event.cancelBubble = true;
}
if(e && e.stopPropagation){
e.stopPropagation();
}
var target = (window.event)? window.event.srcElement : (e)? e.target : null;
if(target){
target = dbMenu.getTarget(target, 'li');
if(!target) return;
}else{
return;
}
if(target.className.search(/'bclick'b/) == -1){
target.className += ' click';
}else{
target.className = target.className.replace(/click/g, '');
}
},
nav: function(e){
if(window.event){
window.event.cancelBubble = true;
}
if(e && e.stopPropagation){
e.stopPropagation();
}
var target = (window.event)? window.event.srcElement : (e)? e.target : null;
if(target){
target = dbMenu.getTarget(target, 'li');
if(!target) return;
}else{
return;
}
for(var i = 0; i < target.childNodes.length; i++){
var node = target.childNodes[i];
if(node.nodeName.toLowerCase() == 'a'){
window.location = node.href;
break;
}
}
},
getTarget: function(target, elm){
if(target.nodeName.toLowerCase() != elm && target.nodeName.toLowerCase() != 'body'){
return dbMenu.getTarget(target.parentNode, elm);
}else if(target.nodeName.toLowerCase() == 'body'){
return null;
}else{
return target;
}
},
styleSubMenus: function(menu){
lis = menu.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
node = lis[i];
node.parentMenu = menu;
if(node.getElementsByTagName('ul').length != 0){
node.className += ' subMenu';
sublis = node.getElementsByTagName('li');
for(var j = 0; j < sublis.length; j++){
sublis[j].parentSubMenu = node;
}
}
}
}
}
function addEvent(elm, evType, fn, useCapture){ //cross-browser event handling for IE5+, NS6+, and Mozilla/Gecko By Scott Andrew
if(elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
}else if(elm.attachEvent){
var r = elm.attachEvent('on' + evType, fn);
return r;
}else{
elm['on' + evType] = fn;
}
}
addEvent(window, 'load', dbMenu.init, false);
首先,也是最重要的一点是,触控设备没有点击事件。Mobile Safari模拟点击、鼠标移过和鼠标移出事件。在iOS 5中,苹果公司可能已经改变了确定点击的方式。
检查以确保事件没有被悬停处理程序捕获。我会首先在你的iOS设备上启用开发者控制台,并为每个事件添加日志记录。这应该告诉你哪些事件正在被触发,以及它们何时被触发。
要修复它,您可能需要检查设备是否支持触摸事件。像"ontouchstart" in window
这样的东西应该做到这一点,只绑定该设备所需的事件(悬停或点击)。
相关文章:
- Javascript循环不会自我更新
- 添加文字和评论功能更新Div
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- AngularJS:ng之后,重复$scope值未按预期更新
- 如何通过数组更新角度子范围
- Ajax聊天消息重复而不仅仅是更新
- 通过CSV文件上载更新数据库表
- 平均值:无法将数据更新到数据库
- $rootScope未使用forEach进行更新
- d3基于用户选择动态更新节点
- ActiveX ListControl 事件在 Windows 更新后不再起作用
- 虚拟键盘在更新到 Chrome v50 后不再工作
- angularjs:自定义直接中的绑定数据在使用“”后不再更新;track-by-;在ng重复中
- NG-model 在输入文本后不再更新
- 流星-不再实时更新
- Sequelize更新不再工作:;传递给update的选项参数中缺少where属性;
- 更新到Angular 1.3.0不再工作
- JavaScript子菜单在iPhone iOS 5更新后不再工作
- Firefox插件图标在Firefox 29更新后不再显示
- 高图表:数据更新后,同步图表不再同步