html 桌面端事件和移动事件兼容

2024-11-01

【转】HTML5移动端最新兼容问题解决方案

1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了480320,这样devicePixelRatio＝2.现在android比较乱,有1.5的,有2的也有3的.让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍).例如一个

移动端—— 兼容PC端，移动端的点击事件

移动设备上不支持鼠标事件,好在webkit内核的移动浏览器支持 touch 事件,所以触摸事件是移动应用中所必须的.touchstart.touchmove.touchend事件可以类比于mousedown.mouseover.mouseup的触发. 一.touch 相应事件 touchstart : 当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发.touchmove : 当手指在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefault()可阻止滚动.touch

H5案例分享：移动端滑屏 touch事件

移动端滑屏 touch事件移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发.touchmove: //在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefault()可阻止滚动.touchend: //从屏幕上移开

angularJS在移动端的点击事件延迟问题

在运用angular开发移动端的应用时,发现它并没有将ng-click做兼容,在移动端使用ng-click事件仍然会有300ms延迟.后来发现angular有一个专门针对移动端的模块:angular-touch.js,其中对ng-click做了兼容性处理,以下为该模块中部分内容: /** * @ngdoc method * @name $touchProvider#ngClickOverrideEnabled * * @param {boolean=} enabled update the ng

移动端开发用touch事件还是click事件

前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着也是不错的. 首先,我先说一下touch事件在开发中存在的两个问题: 1.touch事件在某些场景下存在点击穿透的问题. 2.touchstart事件时触摸屏幕就会触发,touchend事件是手指离开屏幕就会触发,而有时候,我们仅仅是只想滑动屏幕,却会触发这两个事件. 1问题的原因:移动端事件触发的

【技术博客】移动端的点击事件与Sticky Hover问题

目录移动端的点击事件与Sticky Hover问题 TL;DR 前言问题描述背景实现方式问题关于移动端浏览器的点击事件初次发现问题后各种解决尝试:从点击事件本身下手 cursor: pointer 区分设备分别使用click和touchend 问题的根源:CSS中:hover伪类在移动端的表现问题解决办法移动端的点击事件与Sticky Hover问题 v1.0 作者:ZBW TL;DR 解决办法是:在:hover伪类外使用@media区分设备,在移动设备上使hover效果不生效

移动端之触摸事件、Tap事件和swipe事件

触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触发 touchmove 在屏幕上来回的滑动的时候触发 touchend 离开屏幕的时候触发 touchcancel 被迫终止触摸的时候触发 (例如:来电消息弹窗) <div class="box"></div> <script> var box = d

移动端的传统click事件延迟和点透现象

一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重叠的部分,就会出现点透的现象. 二.点透现象的分析在移动端不使用click而用touch事件代替触摸是因为click事件有着300ms的延迟,事件触发的顺序: touchstart--touchmove--touchend--click touchstart:在这个DOM(或冒泡到这个DOM)上手

JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->

移动端300ms点击事件的延迟

移动端click事件300ms延迟移动端click事件300ms的延迟在目前看来,已经是老生常谈了. 以下内容,我会在参考资源的基础上谈谈我对移动端click事件300ms延迟的一些理解.本人愚昧,如有不足,望浏览指正. 300ms延迟的原因参考资源有谈到,300ms延迟是因为浏览器要判断用户的操作而规定的.浏览器不知道用户的手指离开屏幕之后是否会再次回到屏幕,还是就此结束触摸事件.为了确定用户接下来的操作,浏览器不得不等待一段时间.而浏览器开发者找到了一个最佳时间间隔,就是300ms. 而

移动端与PC端的触屏事件

由于移动端是触摸事件,所以要用到H5的属性touchstart/touchmove/touched,但是PC端只支持鼠标事件,所以此时可以这样转换 var touchEvents = { touchstart:"touchstart", touchmove:"touchmove", touchend:"touchend", initTouchEvents:function () { var self = this; if (self.isPC()

处理事件冒泡，阻止默认事件工具类，兼容IE

//处理事件冒泡,阻止默认事件工具类,兼容IEvar eventUtil={ // 添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ //处理IE浏览器的兼容 element.attachEvent('on'+type,handler);

移动端笔记——jQuery touch事件

判断移动端还是pc端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag = true; for (var v = 0; v

事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

● 事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->事件冒泡,重写onlick会覆盖之前属性,没有兼容性问题 ele.onclik = null; //解绑单击事件,将onlic

监听微信端，手机端，ios端的浏览器返回事件，pc端关闭事件

直接上代码了,可以监听微信端,手机端,iOS端的浏览器返回事件,关闭事件不支持当进入该页面,我们就给这个history压入一个本地的连接.当点击返回.后退及上一页的操作时,就进行监听,在监听代码中实现自己操作 window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false); 虽然我们监听到了后退事件,但是页面还是会返回上一个

jquery关于移动端的点击事件解析

jquery关于移动端的点击事件解析如果用click来写你连续点几下会没有反应响应是非常慢的所以移动端必须用touchstart代替click来写

移动端的touch click事件的理解+点透

移动端在touch上一共有4个事件 touchstart touchmove touchend touchcancel, touchcancel, 一般来说,它们执行的顺序为 touchstart -> touchmove -> touchend -> touchcancel . 其中touchcancel一般情况下不会触发,也不是这里讨论的焦点: 这里会结合click对上面的事件进行讨论, touch发生在click之前先上段代码,直观感受一下 <!DOCTYPE html&g

浏览器端-W3School-JavaScript：JavaScript 事件参考手册

ylbtech-浏览器端-W3School-JavaScript:JavaScript 事件参考手册 1.返回顶部 1. JavaScript 事件参考手册事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件句柄 HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作. 属性当以下情况发生时,出现此事件 F

移动端的设备提供了一个事件：orientationChange事件

移动端的设备提供了一个事件:orientationChange事件:https://blog.csdn.net/gong1422425666/article/details/79001836

解决红米等手机(移动端)无法触发touchend事件

触屏事件的简单描述: js的触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是 pageX和 pageY,表示X坐标,Y坐标.touchstart=在触摸开始时触发事件touchend=在触摸结束时触发事件touchmove=这个事件比较奇怪,按道理在触摸到过程中不断激发这个事件才对,但是在我的 Android 1.5 中,在 touchstart 激发后激发一次,然后剩余的都和 touchend 差不多同时激发.这三个事件都都有一个

JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: JavaScript版本: DOM0事件不支持委托链 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-T

html 桌面端事件和移动事件兼容

热门专题