手机端, 返回按钮 ,网页会触发什么事件

2024-11-02

HTML5 浏览器返回按钮/手机返回按钮事件监听

1.HTML5 History对象支持使用pushState()方法修改地址栏地址,而不刷新页面. popstate事件当history实体被改变时,popstate事件将会发生.调用pushState()方法或者replaceState()方法是触发,当用户点击浏览器返回按钮时也会触发. 事件注册实例: window.addEventListener('popstate', function (event) { console.info(event); console.info(even

浏览器返回按钮不会触发onLoad事件

最近在做一个移动端项目,发现移动端某些返回和PC端是有差异的, 比如ios中返回按钮是直接使用缓存的, 不会执行任何js代码, 这个问题很蛋疼, 例如, 在提交的时候将按钮设置为loading状态, 如果在提交成功后没有对按钮进行处理, 那么返回后按钮依然是loading状态, 这种体验很差, 如下图: 此问题是由于某些浏览器在back的时候是直接使用的之前的视图,页面没有进行重新加载而导致的,在网上找了些资料, 发现这是H5的一些新特性Back-Forward Cache(简称bfcache)

event.target 属性返回哪个 DOM 元素触发了事件。

<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul> <script> $("ul").click(function(event) { console.log(event); va

手机端input，select屏蔽浏览器默认事件

文本框input:当文本框focus时会弹出软键盘,有时我们需要click事件而又不想触发focus事件(不要弹出软键盘) 给input添加 disabled="disabled"属性屏蔽click及focus事件,再使用touchstart来绑定点击事件下拉选择框select:有时需要在点击的时候做出判断,同上添加disabled="disabled"屏蔽掉click,使用touchstart代替

百度地图手机端单触点单击和长按事件，解决部分手机(小米手机)地图单击事件失效，多触点、拖动依然触发长按的bug

/** * Author 岳晓 * * 对百度地图的事件扩展,目前扩展了fastclick和longclick, * 解决某些设备click不执行的问题 * 解决长按事件在拖动.多触点依然执行的bug * v1.0.0 */ (function(){ BMap.Map.prototype.on=function(evt,fn,option){ var _option = { canBubble:true } extend(_option,option) if(!evt || !fn) retur

手机端wap站网页播放腾讯视频代码

<div class="detail-con clear"> <div id="mod_player_wrap" class="mod_player_wrap"> <div class="mod_inner"> <div id="mod_inner" class="mod_player_section center mod_independent"

原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中使用,同时兼容pc端和触屏端. 轮播图的样式也分很多种,淡入淡出的轮播图很容易实现,只需要把图片全都叠在一起,让相应的图片轮流显示就行了,但是滚动能的轮播图就要复杂很多.这里介绍的是滚动的轮播图: 原理: 实现的原理就是将所有的图片横向的排列起来,排成一个长方形,让这个长方形的总体不断平移,从而使图

手机端的click

一:click事件的封装手机端的click事件不是太好用, 1.点击会有延迟, 2.会出现一个灰色区域就想到了用touch事件代替. touch事件有touchstart,touchmove,touchend. 在使用的时候会有这样的一种情况. 现在我想在一个元素上使用touch实现单击. 意思就是当我的手点下去,在抬起来后触发事件. 如果我绑定touchstart肯定是不行的:手还没抬起,就触发了事件. 如果绑定touchend.会有一些不友好的体验. 比如:我的手在元素上滑动,然后抬起,

GridView中的更新按钮不能触发RowUpdating事件

当点击“编辑”按钮以后,可以看到“更新”和“取消”按钮,“取消”按钮可以正常触发RowCancelingEdit事件,但是“更新”按钮不能触发RowUpdating事件. 解决方案: 在<asp:CommandField>中添加 CausesValidation="false" . Gridview RowUpdating Not Firing (RowUpdating event not firing on update button click for GridView

JS事件鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定"按钮时,触发onmouseover事件,调用函数info(),弹出消息框,代码如下: 运行结果: 任务补充右边编辑器第13行,当鼠标经过"确定"按钮后,调用message()函数,弹出消息对话框. <!DOCTYPE HTML> <html> <head

手机端网页返回顶部js代码

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>手机端网页返回顶部js代码</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m

网络爬虫中Fiddler抓取PC端网页数据包与手机端APP数据包

1 引言在编写网络爬虫时,第一步(也是极为关键一步)就是对网络的请求(request)和回复(response)进行分析,寻找其中的规律,然后才能通过网络爬虫进行模拟.浏览器大多也自带有调试工具可以进行抓包分析,但是浏览器自带的工具比较轻量,复杂的抓包并不支持.且有时候需要编写手机APP爬虫,这时候就必须需要用到其他的专业抓包工具,例如本篇介绍的Fiddler. 2 Fiddler简介 Fiddler是位于客户端和服务器端的HTTP代理,也是目前最常用的http抓包工具之一,它能够记录客户端和

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

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

移动端调试神器vconsole,手机端网页的调试工具Eruda

移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试移动端调试工具vconsole安装Git地址:https://github.com/WechatFE/vConsolevConsole是一款由微信公众平台前端团队打造的前端调试面板,专治手机端看log难题.目前vConsole自带有2个面板,默认为“日志”面板,负责展示log. 项目开发时经常需要debug调试,但在移动端debug则会阻断代码运行,并且很难判断出错在哪里,这里我们需要借助第三方插

手机端网页使用html5地理定位获取位置失败的解决办法

网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器,都返回一样的错误信息: POSITION_UNAVAILABLE 网上的方法大概是这样的: if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(onSuccess , onError); }else{ alert("

用phpcms切换中英文网页的方法（不用解析二级域名）、phpcms完成pc和手机端切换（同一域名）

AA.phpcms进行双语切换方法(不用解析二级域名)作者:悦悦博客地址:http://www.cnblogs.com/nuanai/ phpcms进行两种语言的切换,有一把部分的人都是进行的二级域名的解析,这样的话可能会有一部分的麻烦,我这里有一种方法可以不用解析二级域名就可以,不过因为是模板所以可能麻烦一点,不过真的是不接触不知道,接触到没有用到的东西就可以进行进一步的学习.作者:悦悦博客地址:http://www.cnblogs.com/nuanai/ 这里我使用的方法是进行一级栏目的

判断网页打开浏览器类型，PC 手机端，微信浏览器，，，

//判断网页打开浏览器类型,PC 手机端,微信浏览器,,, <script type="text/javascript"> var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.in

手机端网页web开发要点

1.初始化 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,u

70.JS---利用原生js做手机端网页自适应解决方案rem布局

利用原生js做手机端网页自适应解决方案rem布局刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.s

学习手机端的META差异，打造自己的移动网页

我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. 接下来我们来看看各大网站手机端的meta标签:一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content

手机端, 返回按钮 ,网页会触发什么事件

热门专题