自动创建的a标签并使用js点击,在Andorid端好用但在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

     

     

时间: 2017-12-28

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

动态创建标签-js如何创建一个p标签,并设置内容为helloWorld

问题描述 js如何创建一个p标签,并设置内容为helloWorld function click_label(object) { var div_object = document.getElementById("div_id"); if(!div_object) { div_object.createElement('p'); //?这边如何设置它的标签内容为"HelloWorld" } } //?这边如何设置它的标签内容为"HelloWorld&quo

word2003中怎么设置不自动创建绘图画布?

word2003中怎么设置不自动创建绘图画布?word2003以其启动快,操作方面著称.但是在插入自选图形时有一个自以为是的毛病,设计者初衷是为了使用者画图方便,结果反而给用户来了麻烦,如何把这一功能关闭呢? 1.单击插入→图片→自选图形,在选择工具画图时,就会出现下图的情形.给人以挥之不去的感觉,很是讨厌. 2.如何把这东西去掉,永不再来呢?可以在选项里进行设置.单击工具命令. 3.点击选项,就可以弹出一个窗口. 4.上面有12个标签,我们选择常规,单击一下. 5.把插入自选图形时,自动创建画

在css加载完毕后自动判断页面是否加入css或js文件_jquery

最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下: //如果没有包含ui.js,则引用 if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $(""<script src='/js

ExtJS6的中sencha cmd中自动创建案例项目代码分析

在之前的博文中,我们按照sencha cmd的指点,在自己win7虚拟机上创建了一个案例项目,相当于创建了一个固定格式的文档目录结构,然后里面自动创建了一系列js代码. 这是使用sencha cmd自动创建的文件夹目录结构: 然后我们将整个项目,copy到win7服务器上部署好的apache服务器上: 运行一下,果然可以使用: 让我们来看看,这些自动创建的文件目录和js文件是如何工作的: 整个extjs项目的入口文件是app.js文件 之所以这么说估计ext就这么定义的,看看蒋锋的博客,下图,也

关于ajax select 无限极联动修改时自动创建并选中时的问题

问题描述 页面:<tr><td>产品名称</td><thid="proContent"><selectid="proname"name="proname"onchange="showChild()"><optionvalue="">请选择..</option><tpl:foreachcollection="$

谷歌计划 2020 年停止 Chrome 后台标签页的 JS 操作

Google 公布了一项针对 Chrome 的后台标签页的长期愿景和未来计划,对 Web 生态系统的愿景是能够完全挂起后台标签页,不做 DOM 交互,直到页面再次被前置.这将显着改进电池使用寿命,而且还节省内存. Google 表示后台标签占据了浏览器平均功耗的三分之一,从而缩短了电池寿命.在许多情况下,在后台进行的工作对于用户体验来说是不必要的.Chrome 希望通过确保仅在后台执行相关工作来保护用户免受此类影响. 从 Google 公布的计划时间来看,预计 2017 年 Q2 实现五分钟后自

VSTS 通过生成中未通过的测试自动创建 Bug 工作项

文章介绍 在项目中我们往往需要系统Bug很容易被发现, 并且希望其自动通知开发人员, 现在使用TFS 2008 就可以很轻松的实现自动将测试未通过的生成, 创建成一个工作项. 实现步骤 1. 建立新生成 步骤1:打开团队项目并创建生成 建立一个"生成", 在团队项目浏览器中找到"生成"目录, 并右击选择"新建生成定义": 在弹出窗口中我们定义以下生成的具体信息: 常规中我们必须填写生成名称, 描述可以选填; 然后再工作区中默认选择即可; 项目文件

linux下怎么写一个自动创建文件夹和文件的脚本?

问题描述 linux下怎么写一个自动创建文件夹和文件的脚本? linux下怎么写一个自动创建文件夹和文件的脚本?就是说我给一个绝对路径,程序会自动帮我创建在路径中没有的文件夹和文件. 解决方案 http://blog.csdn.net/hellochenlian/article/details/37566269 -p, --parents 可以是一个路径名称.此时若路径中的某些目录尚不存在,加上此选项后,系统将自动建立好那些尚不存在的目录,即一次可以建立多个目录; 解决方案二: mkdir 加上

Excel自动创建财会工作表超链接目录

Excel宏代码片段: Private Sub Worksheet_Activate() Dim sh As Worksheet Dim a As Integer Dim R As Integer //在目录工作表激活时,自动创建工作簿中除"目录"工作表外所有工作表的目录 R = Sheet1.[A65536].End(xlUp).Row a = 2 If Sheet1.Cells(2, 1) <> "" Then//判断是否存在工作表目录 Sheet1