首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用touchstart和touchend事件跟踪移动设备上跨域iframe的点击

在移动设备上,由于安全性的考虑,跨域的iframe中的内容无法直接通过常规的点击事件进行跟踪。但是可以通过使用touchstart和touchend事件来模拟点击事件,并跟踪移动设备上跨域iframe的点击。

touchstart事件在用户触摸屏幕时触发,而touchend事件在用户停止触摸屏幕时触发。通过监听这两个事件,可以获取用户点击的位置信息,并进行相应的处理。

以下是一种实现方式:

  1. 在父页面中,监听touchstart事件,并获取触摸点的坐标信息。
代码语言:txt
复制
document.addEventListener('touchstart', function(event) {
  var touch = event.touches[0];
  var x = touch.clientX;
  var y = touch.clientY;
  // 进行相应的处理
});
  1. 在父页面中,监听touchend事件,并获取触摸点的坐标信息。
代码语言:txt
复制
document.addEventListener('touchend', function(event) {
  var touch = event.changedTouches[0];
  var x = touch.clientX;
  var y = touch.clientY;
  // 进行相应的处理
});
  1. 在父页面中,通过计算touchstart和touchend事件的坐标差值,判断是否为点击事件。
代码语言:txt
复制
var threshold = 10; // 点击事件的阈值,可以根据实际情况进行调整

document.addEventListener('touchstart', function(event) {
  var touch = event.touches[0];
  var startX = touch.clientX;
  var startY = touch.clientY;

  document.addEventListener('touchend', function(event) {
    var touch = event.changedTouches[0];
    var endX = touch.clientX;
    var endY = touch.clientY;

    var distance = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));

    if (distance < threshold) {
      // 是点击事件,进行相应的处理
    }
  });
});

通过以上方式,可以在移动设备上跟踪跨域iframe的点击事件。具体的处理逻辑可以根据实际需求进行定制。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

第134天:移动web开发一些总结(二)

关于响应式设计思考: 根据响应式设计理念,一个页面包含所有设备不同屏幕样式图片,当一个移动设备访问一个响应式页面,就会下载pc,笔记本,ipad等不同设备对应样式。...自定义tao事件原理: 在touchstarttouchend记录时间、手指位置,在touchend时进行比较,如果手指位置为同一位置(或允许移动一个非常小位移值)且时间间隔较短(一般认为是200ms...touchstart:手指触摸屏幕触发(已经有手指放屏幕不会出发) touchmove:手指在屏幕滑动,连续触发 touchend:手指离开屏幕时触发 touchcancel:系统取消touch时候触发...5、 终端web ① 单 - Media Query ② 单 – 多模板 ③ 多 – 跳转(很原始) ④ 多平台 App (1) 移动优先: ① 移动用户流量越来越多 ② 各种屏幕让我们更聚焦业务本领...在手机上和平板设备版本,是创建移动web app框架。

1.8K10

10-移动端开发教程-移动事件

最基本touch事件包括4个事件touchstart: 当在屏幕按下手指时触发 touchmove: 当在屏幕移动手指时触发 touchend: 当在屏幕抬起手指时触发 touchcancel...2.1 touch事件与click事件同时触发 在很多情况下,触摸事件鼠标事件会同时被触发(目的是让没有对触摸设备优化代码仍然可以在触摸设备正常工作)。...因为双击缩放检测存在,在移动设备屏幕上点击操作事件执行顺序: touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件,可以调用 event.preventDefault...如何用户手指从触屏设备边缘移出了触屏设备,也会触发 touchend 事件touchend 事件 target 也是与 touchstart target 一致,即使已经移出了元素。...封装移动端tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动点击事件, 以下是封装几个事件,仅供参考。

6.8K80
  • touchstart,touchmove,touchend触摸事件小小实践心得

    大家好,又见面了,我是全栈君 近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须,刚开始以为移动设备或许也会支持鼠标事件,原来是不支持,好在webkit内核移动浏览器支持...简单介绍一下这三个触摸列表,touches是在屏幕所有手指列表,targetTouches是当前DOM手指列表,所以当手指移开触发touchend事件时,event.originalEvent是没有这个...targetTouches列表,而changedTouches列表是涉及当前事件列表,例如touchend事件中,手指移开。...接下来谈谈pc与移动适配问题,既然使用html5,当然是看中他平台特性了,不仅仅要iosandroid适配,pc直接打开网页最好也是可以,但是pc只支持鼠标事件怎么办。...= "mouseup"; } } }; /* hwq2.com */ 若在pc,则使用鼠标事件,在移动设备中,就使用触摸事件,就这么简单,判断是否pc

    62110

    10-移动端开发教程-移动事件

    最基本touch事件包括4个事件touchstart: 当在屏幕按下手指时触发 touchmove: 当在屏幕移动手指时触发 touchend: 当在屏幕抬起手指时触发...2.1 touch事件与click事件同时触发 在很多情况下,触摸事件鼠标事件会同时被触发(目的是让没有对触摸设备优化代码仍然可以在触摸设备正常工作)。...因为双击缩放检测存在,在移动设备屏幕上点击操作事件执行顺序: touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件,可以调用 event.preventDefault...2.4 touchend事件 ​ 当用户手指抬起时候,会触发 touchend 事件如何用户手指从触屏设备边缘移出了触屏设备,也会触发 touchend 事件。...封装移动端tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动点击事件, 以下是封装几个事件,仅供参考。

    6.4K70

    移动端】touch事件及穿透事件

    苹果解决方案: 方案一:双指进行缩放 方案二:在屏幕双击进行放大(单击300ms后,再单击才算双击),造成了,移动点击事件,300ms 延迟问题 解决方案,就是使用touch事件来替代 移动端新增...touch事件 --- 只能使用现代事件进行添加 touchstart: 触摸开始 touchmove: 触摸移动 touchend: 触摸结束 touchcancel:touch 取消,如来电等...: 跟当前事件相关所有触点信息 e.targetTouches:作用在当前元素所有触点信息 【扩展】touch事件touches、targetToucheschangedTouches详解...点击穿透现象情况: 1) 蒙层问题 蒙层关闭按钮绑定是touch事件,而按钮下面元素绑定是click事件,touch事件触发后,蒙层消失,300ms后这个点click事件触发。...2) 页面点击穿透问题 如果按钮下面恰好是一个href属性a标签,那么页面就会发生跳转(a标签跳转默认是click事件触发) 解决问题: 方法一:自己封装tap事件不会有穿透问题,因为阻止了默认行为

    2K10

    触摸事件 touchstart、touchmove、touchend

    2、移动端浏览器触摸事件事件名称 描述 是否包含 touches 数组 touchstart 触摸开始,多点触控,后面的手指同样会触发 是 touchmove 接触点改变,滑动时 是 touchend...触摸结束,手指离开屏幕时 是 touchcancel 触摸被取消,当系统停止跟踪触摸时候触发 否 3、每个触摸事件都包括了三个触摸列表,每个列表里包含了对应一系列触摸点(用来实现多点触控):...,是全面建成小康社会、坚持发展中国特色社会主义...... 1、如果在 PC 上访问,可以使用 Chrome 浏览器移动响应式设备进行模拟,或者直接在移动设备(如手机)上访问 2、Chrome 浏览器,F12...3、tSize 是当前位于屏幕所有手指列表个数、targetTSize 是位于当前绑定事件 DOM 元素上手指列表个数、changedTSize 是涉及当前事件手指列表个数。

    1.7K20

    移动端click延迟及zepto穿透现象 转

    当你点击移动设备屏幕时, 可以分解成多个事件,顺序依次为:touchstart — touchmove — touchend — click, 这些事件是按顺序依次触发....解决延迟思路: touchstart touchend是没有延迟,可以在touchend时触发用户想要在click时触发事件. zepto 解决click延迟原理: 自定义tap事件,当用户点击元素时...,touchend事件先发生, 当touchend事件冒泡到document时触发目标元素绑定tap事件 简单模拟zepto tap实现方式(这里忽略touchstarttouchend点击位置判断...): // document元素绑定touchend事件, 在touchend事件处理函数中自定义tap事件, 当点击目标元素touchend事件冒泡到document时, 触发绑定在目标元素...如何解决穿透: 方法一:直接将上层元素tap事件换成click事件(会出现300ms延迟触发事件) 方法二:在click事件触发前阻止它,如在touchend事件使用e.preventDefault

    1.3K10

    移动事件穿透原理与解决方案

    移动设备流行,带动了移动互联网快速发展,很多开发者开始进入移动开发领域。...目前市面上主流移动设备一般都使用触摸屏,触摸屏所使用触摸事件模型与传统网页鼠标事件模型有所区别,这种差异往往使初涉移动开发工程师陷入困境,事件穿透问题便是其中一个,本文将带你了解事件穿透及如何在实际项目中选择合适方案解决事件穿透问题...产生原因 当今,主流移动设备一般都使用触摸屏,Web 应用程序可以使用触摸事件(Touch Events)直接处理基于触摸输入,或者应用程序可以使用可解释鼠标事件以处理应用程序输入。...在很多情况下,触摸事件鼠标事件会同时被触发(目的是让没有对触摸设备优化代码仍然可以在触摸设备正常工作)。...触摸事件并立即隐藏掉自身,之后应该按先后顺序触发 mask 元素 touchend click 事件

    1.4K20

    javaScript — touch事件详解(touchstart、touchmovetouchend

    今天为大家介绍事件主要是触摸事件touchstart、touchmovetouchend。...一开始触摸事件touchstart、touchmovetouchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加事件。...因为ios设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页时候,PC端鼠标键盘事件是不够用。...在iPhone 3Gs发布时候,其自带移动Safari浏览器就提供了一些与触摸(touch)操作相关事件。随后,Android浏览器也实现了相同事件。...在这个事件发生期间,调用preventDefault()事件可以阻止滚动。 touchend事件:当手指从屏幕离开时候触发。 touchcancel事件:当系统停止跟踪触摸时候触发。

    1.9K20

    移动端web开发,click touch tap区别

    移动端用tap时会有穿透问题 一:click与tap比较 click与tap都会触发点击事件,但是在手机web端,click会有200-300ms延迟,所以一般用tap代替click作为点击事件。...singleTap doubleTap分别代表单次点击双次点击 二:tap穿透处理 使用zepto框架tap点击事件,来规避click事件延迟响应,会出现穿透,即点击会触发非当前层点击事件...三:穿透原因 问题:在HTML5点击了q以后,弹出b弹框 因为tap事件是通过document绑定了touchstarttouchend事件实现,$('.q'),当touchend事件冒泡到document...1.github上有一个叫做fastclick库,它能规避移动设备click事件延迟响应https://github.com/ftlabs/fastclick将它用script标签引入页面(该库支持...现金大多数触屏手机webkit内核提供了touch事件监听 包含:touchstart touchmove touchend touchcancel四个事件 touchstart touchmove

    2.3K100

    什么是移动端开发【重点学习系列—干货十足–一万字详解】

    事件类型 应用场景 事件绑定 点击穿透 解决方法 页面跳转选择 浏览器默认行为 为什么要阻止这些默认行为 如何阻止默认行为 后遗症 灵丹妙药 事件对象属性 touchstart 事件 touchmove...viewport-fit 设置为 cover 可以解决『刘海屏』留白问题 4-移动事件 事件类型 移动事件列表 touchstart 元素触摸开始时触发 touchmove 元素触摸移动时触发...应用场景 touchstart 事件可用于元素触摸交互,比如页面跳转,标签页切换 touchmove 事件可用于页面的滑动特效,网页游戏,画板 touchend 事件主要跟 touchmove 事件结合使用...延时隐藏遮盖元素 页面跳转选择 移动端页面跳转可以使用 a 链接,也可以使用 touchstart 事件来触发 JS 代码完成跳转 效率touchstart 速度更快 SEO 优化, a 链接效果更好...targetTouches 为结束时时,当前元素触点对象数组 touches 为结束时时,当前屏幕所有的触点对象数组 触摸结束位置,必须要使用 touchend 事件 changedTouches

    2.5K21

    移动端」touch事件,touchEvent对象

    PC 端添加效果使用 mouseup、mousedown、mousemove,而移动使用 touchstart、touchmove、touchend 。...touchmove:手指在屏幕移动,mousemove:鼠标在网页移动touchend:手指抬起,mouseup:鼠标弹起。...touch:事件只能在移动使用,mouse :事件只能在 PC 端使用touchstart: 只能在绑定元素内按下触发,touchmove、touchend可以在屏幕任意位置执行。...,手机如何访问电脑本地网页,建议使用Browsersync,手机运行网页,手机触摸屏幕,在元素触摸等观察上述三个属性打印情况。...很多情况下,触摸事件跟鼠标事件会同时触发,目的是为了在pc端运行时候,没有触摸设备可以使用鼠标代替。

    1K30

    2017移动前端一些总结web前端 —— 移动端知识一些总结一.css部分二.js部分

    放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应缩小了 (980px是相对于手机像素,我是超过1000px多一些就出现滚动条了,这个没具体研究)。...`,具体请看[这里][5] 3.有些版本 iphone4中, audio video默认播放事件不会触发,比如使用 window.onload或计时器等都不能触发播放,必须用 JS写事件让用户手动点击触发才会开始播放...(".class element"),操作 class可以用 classList 6.点击一个元素时,使用 touchstart会立即触发,而使用 click则用有大概 0.3s延迟 想模拟一个立即触发点击事件有两种方法..., fastclick.js zepto.js里 tap事件。...(这个没用过)  ③ 有的时候比如弹出一个 iphone滑动出来层,点击黑色半透明区域弹出层消失,这种可以在黑色区域绑定 touchend也是 tap差不多效果 7.当弹窗出现时,想禁止屏幕滑动

    3.7K40

    移动端」touch事件,touchEvent对象

    PC 端添加效果使用 mouseup、mousedown、mousemove,而移动使用 touchstart、touchmove、touchend 。...touchmove:手指在屏幕移动,mousemove:鼠标在网页移动touchend:手指抬起,mouseup:鼠标弹起。...touch:事件只能在移动使用,mouse :事件只能在 PC 端使用touchstart: 只能在绑定元素内按下触发,touchmove、touchend可以在屏幕任意位置执行。...,手机如何访问电脑本地网页,建议使用Browsersync,手机运行网页,手机触摸屏幕,在元素触摸等观察上述三个属性打印情况。...很多情况下,触摸事件跟鼠标事件会同时触发,目的是为了在pc端运行时候,没有触摸设备可以使用鼠标代替。

    2.4K20

    移动端」touch事件,touchEvent对象

    PC 端添加效果使用 mouseup、mousedown、mousemove,而移动使用 touchstart、touchmove、touchend 。...touchmove:手指在屏幕移动,mousemove:鼠标在网页移动touchend:手指抬起,mouseup:鼠标弹起。...touch:事件只能在移动使用,mouse :事件只能在 PC 端使用touchstart: 只能在绑定元素内按下触发,touchmove、touchend可以在屏幕任意位置执行。...,手机如何访问电脑本地网页,建议使用Browsersync,手机运行网页,手机触摸屏幕,在元素触摸等观察上述三个属性打印情况。...很多情况下,触摸事件跟鼠标事件会同时触发,目的是为了在pc端运行时候,没有触摸设备可以使用鼠标代替。

    1.2K30

    移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动解决方法

    之后继续百度,得知当在移动端上点击屏幕时,会依次触发touchstart,touchmove,touchend,click事件。...之后我大胆推测了一下: 会不会是因为在移动端click事件触发条件就是必须touchstarttouchend同时触发才能触发click呢?...之后我删除了touchstartevent.preventDefault方法,果然超链接click事件都触发了,但是前面说问题又出现了,在QQ微信中touchmovetouchend又出问题了...x轴y轴移动值,判断当前是往哪个方向滑动,如果是在x轴滑动(左右),就调用event.preventDefault()方法,如果是在y轴滑动(上下),就不调用event.preventDefault...在touchstart中如果有event.preventDefault()方法, 将不会触发click事件a标签方法。在这里可以使用tap代替click,但是a标签的话就不太方便了。

    3.3K20

    touch事件,touchEvent对象

    PC 端添加效果使用 mouseup、mousedown、mousemove,而移动使用 touchstart、touchmove、touchend 。...touchmove:手指在屏幕移动,mousemove:鼠标在网页移动touchend:手指抬起,mouseup:鼠标弹起。...touch:事件只能在移动使用,mouse :事件只能在 PC 端使用touchstart: 只能在绑定元素内按下触发,touchmove、touchend可以在屏幕任意位置执行。...,手机如何访问电脑本地网页,建议使用Browsersync,手机运行网页,手机触摸屏幕,在元素触摸等观察上述三个属性打印情况。...很多情况下,触摸事件跟鼠标事件会同时触发,目的是为了在pc端运行时候,没有触摸设备可以使用鼠标代替。

    93730

    JS篇(028)-移动端 click 事件、touch 事件、tap 事件区别

    参考答案: 1.click 事件移动端会有 200-300ms 延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击 200-300ms 之后,才触发 click,...其中包括:touchstart, touchmove, touchend, touchcancel 这四个事件touchstart touchmove touchend 事件可以类比于 mousedown...mouseover mouseup 触发 3.tap 事件移动端,代替 click 作为点击事件,tap 事件被很多框架(如 zepto)封装,来减少这延迟问题, tap 事件不是原生,所以是封装...,那么具体是如何实现呢?...click 都替换为了 tap 事件,还是会触发点透问题,因为实质是: 在同一个 z 轴,z-index 不同两个元素,上面的元素是一个绑定了 tap 事件,下面是一个 a 标签,一旦 tap

    6.4K40
    领券