自动创建的a标签并使用js点击,在Andorid端好用但在IOS端不好用

简介: 由于在ios中对于onclick事件并没有好的支持,导致代码在Android端正常运行,而在IOS端运行不正常。
先上出现问题的代码:
HTML:
<div class="info_content txt-item" onclick="selectInfoById(this)">

JS:
function selectInfoById(this_) {
    var uid = $(this_).siblings("input[name=uid]").val();
    var url = "/mobile/queryInfoById?uid="+uid;
    var elementById = 
    document.getElementById("jumphiddenDiv");
    var aElement = document.createElement("a");
    aElement.setAttribute("id","createa");
    aElement.setAttribute("href",url);
    aElement.setAttribute("data-no-cache","true");
    elementById.appendChild(aElement);
    jQuery("#createa")[0].click();
    aElement.remove();
}

稍微解释下,这里在点击之后再remove可能有的人会有疑问,既然跳转了为啥还要remove。这是因为我这里使用了sui的路由功能,跳转之后缓存资源不刷新。

这段代码在ios端不能正常运行报一个这样的错误:

            'undefined' is not a function evaluating XX.click() in Safari

这就尴尬了,赶紧上网查,查到这个东西:
     https://stackoverflow.com/questions/12744202/undefined-is-not-a-function-evaluating-el-click-in-safari#
     虽然没有完全看懂,但是也明白个大概齐:他说:“  the  click()  function is only defined for  HTMLInputElement
     并给出了改进意见,根据他的改进意见作出如下改动:
     
JS:
function selectInfoById(this_) {
    var uid = $(this_).siblings("input[name=uid]").val();
    var url = "/mobile/queryInfoById?uid="+uid;
    var elementById = document.getElementById("jumphiddenDiv");
    var aElement = document.createElement("a");
    aElement.setAttribute("id","createa");
    aElement.setAttribute("href",url);
    aElement.setAttribute("data-no-cache","true");
    elementById.appendChild(aElement);
    //jQuery("#createa")[0].click();
    // First create an event
    var click_ev = document.createEvent("MouseEvents");
    // initialize the event
    click_ev.initEvent("click", true /* bubble */, true /* cancelable */);
    // trigger the event
    document.getElementById("createa").dispatchEvent(click_ev);
    aElement.remove();
}
然而并不好使,起初我是怀疑这个改动不对,但是后来发现不是这样的,在IOS里click的鼠标事件应该有touchstart,touchmove、touchend等触摸事件或者他们的高级事件来触发点击屏幕这个事件。所以我又作出如下改动:

HTML:改动
<div class="info_content txt-item" onclick="selectInfoById(this)" ontouchstart = "myTouchStart(this)" ontouchend = "myTouchEnd(this)" ontouchmove="myTouchMove(this)">
JS:添加
var xtarget = "";
function myTouchStart(this_) {
	var e = window.event;
	xtarget = e.clientX;
}

function myTouchEnd(this_) {
	var e = window.event;
	if(e.clientX ==xtarget){
        selectInfoById(this_);
        xtarget="";
	}else{
        xtarget="";
	}
}
function myTouchMove(this_) {
    xtarget="";
}
这些方法写的非常初级,仅供思路参考,表喷我哦。
这里加三个方法在html上,主要是为了规避由于路由问题从别的界面切换过来的时候,事件绑定不上的问题。


引用资料(非常感谢):
      https://www.cnblogs.com/irelands/p/3433628.html
      http://www.cnblogs.com/dolphinX/archive/2012/10/09/2717119.html
      https://www.cnblogs.com/fengfan/p/4506555.html
      http://blog.csdn.net/jiangcs520/article/details/17564065
     

     



相关文章
|
4月前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
12天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
8天前
|
iOS开发
iOS超出父控件范围无法点击问题
iOS超出父控件范围无法点击问题
|
4月前
|
存储 Android开发 iOS开发
iOS不支持HEIC格式的图片显示和标签函数显示问题及解决方案
iOS不支持HEIC格式的图片显示和标签函数显示问题及解决方案
125 0
|
30天前
|
JavaScript 前端开发 Java
JavaScript内存泄露大揭秘!你的应用为何频频“爆内存”?点击解锁救星秘籍!
【8月更文挑战第23天】在Web前端开发中,JavaScript是构建动态网页的关键技术。然而,随着应用复杂度增加,内存管理变得至关重要。本文探讨了JavaScript中常见的内存泄露原因,包括意外的全局变量、不当使用的闭包、未清除的定时器、未清理的DOM元素引用及第三方库引发的内存泄露。通过了解这些问题并采取相应措施,开发者可以有效避免内存泄露,提高应用性能。
28 1
|
1月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
14 1
|
1月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
15 1
|
1月前
|
JavaScript 前端开发
js点击抽奖符合条件触发点击次数
js点击抽奖符合条件触发点击次数
25 1
|
24天前
|
JavaScript 前端开发
Next js:点击登录显示登录表单,点击注册显示注册表单的功能
本文提供了一个Next.js中使用React状态管理实现点击按钮切换显示登录和注册表单的功能示例,包括创建`authform.tsx`组件和在页面组件中引入使用的方法。
|
2月前
|
JavaScript
vue + d3.js(v6) 绘制【树状图/思维导图】可折叠/展开,可点击跳转,可带标签
vue + d3.js(v6) 绘制【树状图/思维导图】可折叠/展开,可点击跳转,可带标签
365 1