我们的目的是再滑动的时候 不要触发到touchstart事件。

  1. // 再滑动的时候无法点开视频
  2. var is_scroll_start,is_scroll_end;
  3. $(window).on({
  4. 'touchstart':function(){
  5. is_scroll_start=$(document).scrollTop();
  6. },
  7. 'touchmove':function(){
  8. is_scroll_end=$(document).scrollTop();
  9. },
  10. 'touchend':function(){
  11. setTimeout(function(){
  12. is_scroll_end=$(document).scrollTop();
  13. },300)
  14. }
  15. })
  16.  
  17. // 点击播放
  18. $('.ys_myzh_c4_btm').on(clickEvent,'.ys_bj_contmdfn',function(event){
  19. if(is_scroll_start==is_scroll_end){
  20. var videosrc=$(this).attr('videsrc');
  21. // console.log(videosrc);
  22. if(videosrc){
  23. var videostr='<div class="yx_play_video">'+
  24. '<div class="yx_play_video_bg"></div>'+
  25. '<video class="yx_play_video_in" width="" height="" controls>'+
  26. '<source src="'+videosrc+'" type="video/mp4"></source>'+
  27. '</video>'+
  28. '<div class="close_video_yx"><img src="data:images/close_video_yx.png"/></div>'+
  29. '</div>';
  30. $('.yx_mycansaipage').append(videostr);
  31. $('.yx_play_video_in')[0].play();
  32. // videofullScreen($('.yx_play_video_in')[0]);
  33. // 播放完毕自动关闭
  34. $('.yx_play_video_in')[0].addEventListener("ended",function(){
  35. $('.yx_play_video').remove();
  36. })
  37. }
  38. }
  39. })

app内嵌 h5页面 再滑动的时候 触发击穿底下的一些touchstart事件的更多相关文章

  1. ios下app内嵌h5页面是video适配问题

    ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...

  2. app内嵌h5页面在ios手机端滑动卡顿的解决方法

    1.带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2.去掉 width:100%; height:100%

  3. APP中内嵌H5页面为什么不能下载?

    在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...

  4. APP内的H5页面测试方法, 移动端的浏览器(例如UC浏览器)测试方法

    前言: 用appium做UI自动化,测试APP里面的H5和测试手机浏览器打开的H5的操作流程上是有所区别的.比如要测试APP内嵌的H5需要先操作appium启动APP,然后通过context切到web ...

  5. 小程序中webview内嵌h5页面

    小程序内嵌h5页面跳转小程序指定页面,  需要引用  JSSDK:   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...

  6. ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号

    异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...

  7. 移动端开发利器vConsole.js,app内嵌H5开发时调试用

    vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...

  8. app内嵌H5调用分享

    最近产品提出了一个需求:我们在合作方的app中提供的部分页面中增加分享页面,具体要求是在3个二维码推广页面调用app的分享接口,分享方式有3种,分别是点击”分享链接“按钮调起分享,点击”分享图片“按钮 ...

  9. 小程序内嵌H5页面判断微信及小程序环境

    判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...

随机推荐

  1. jQuery的主要使用方法

    一.在html中添加jquery,可以使用cdn加载jquery 1.网址:https://www.bootcdn.cn/jquery/ 2.推荐使用3.4左右版本的,建议使用min.js后缀的,mi ...

  2. Harmonic Number (II) 数学找规律

    I was trying to solve problem '1234 - Harmonic Number', I wrote the following code long long H( int  ...

  3. 常见python面试题

    1,简述列举了解的编程语言及语言间的区别? Python 解释型语言,代码简洁,易懂 C语言 编译型语言,底层语言 c++ 编译型语言,在C语言基础上加了面向对象 Java 混合型语言,可拓展性高 G ...

  4. Virtual Judge HDU 1241 Oil Deposits

    八方向   深搜 #include <iostream> #include<cstdio> #include<cstdlib> #include<algori ...

  5. 用户 'sa' 登录失败。该用户与可信 SQL Server 连接无关联'。错误代码:18452 解决办法

    原文:https://blog.csdn.net/wuxianwei/article/details/6330270 SQLSERVER 2005采用'SQLSERVER身份验证'去登录, 出错的原因 ...

  6. js对象的深拷贝及其的几种方法

    深拷贝和浅拷贝是javascript中一个比较复杂的问题,也是面试官最喜欢问的问题之一,通过这个为可以看出是否入门,深拷贝和浅拷贝也是初学者经常犯错一个点. 简单来说深拷贝是拷贝储存在栈中的对象,而浅 ...

  7. 购物单 && 动态规划 && 背包问题

    题目叙述的言语倒是蛮多的: 王强今天很开心,公司发给N元的年终奖.王强决定把年终奖用于购物,他把想买的物品分为两类:主件与附件,附件是从属于某个主件的,下表就是一些主件与附件的例子: 主件 附件 电脑 ...

  8. spring 配置

    在context中配置 如:在base-package指明一个包: <context:component-scan base-package="cn.edu.dao"/> ...

  9. Elasticsearch系列---shard内部原理

    概要 本篇我们来看看shard内部的一些操作原理,了解一下人家是怎么玩的. 倒排索引 倒排索引的结构,是非常适合用来做搜索的,Elasticsearch会为索引的每个index为analyzed的字段 ...

  10. oracle11g UNDO使用率高,且unexpire过高

    1.查看使用率: col USED_PER for a60 SELECT A.TABLESPACE_NAME AS TABLESPACE_NAME, ,) AS TOTAL_GB, ,) AS FRE ...