解决: 移动端经mouseover显示出的弹层中链接点击问题

news/2024/5/20 22:20:46/文章来源:https://blog.csdn.net/weixin_30446613/article/details/96209791

 

通常我们会遇到这样的需求,导航菜单在鼠标划过的时候显示自定义弹层,在弹层中有一些链接需要点击后跳转或者其他一些事件。比如:

$(".menu li").on("mouseover", function(){var el = $(this);el.find(".dropdown").show();         
});
$(".menu li").on("mouseout", function(){var el = $(this);el.find(".dropdown").show();         
})
View Code

在pc端中没任何问题,但是不做任何自适应处理放到移动端就会产生一些问题:

  • 原本的mouseover事件自动变成了click事件
  • dropdown中的链接只要在点击第二次的时候才会触发跳转

第一个问题是因为mouse*是鼠标事件,专门为鼠标设计的,而mouseover/out等事件则会被手指的点击所触发。所以在移动端开发的时候要尽可能抛弃传统的mouseoveer/out等事件,用Touch事件或者更高级的Gesture事件来代替。

第二个问题就有意思了,无论是通过a标签的href属性做跳转还是改为js跳转全部都要执行第二次才能触发,开始以为是css伪类把原本的事件阻止了,于是把hover样式去掉,发现问题依旧。因为项目为移动pc自适应,所以固执的想要用一套代码解决这个问题。

既然移动端能很好的响应touch事件,那就同时加上click和touchend(jquery自带),哪个生效执行哪个,试试,果然好了。

将原本的链接跳转改为js跳转:

$(".dropdown li a").on("click touchend", function(){// do something
})

 

转载于:https://www.cnblogs.com/huoxiao/p/9812192.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_737233.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小太阳云存储无法获取外链_没有好内容,SEO如何做高质量外链

在Google SEO行业每个人都在谈论内容为王,建立外链最便捷的方式就是撰写高质量内容,其实,这句话没有任何问题,但通常情况下,大家会把优质内容,理解成为优质的原创文章。这让并不擅长写作的个人站长很是头疼…

《SEO的艺术(原书第2版)》——1.7 注意力跟踪:用户如何浏览搜索结果页面...

1.7 注意力跟踪:用户如何浏览搜索结果页面 调查公司Enquiro、Eyetools和 Didit发起的搜索引擎用户热图(heat-map)测试产生的结果引人注目,揭示了用户参与搜索活动时查看的内容和焦点。图1-8描述了Google上进行的热图测试。该图表明…

大型网站技术架构(六)网站的伸缩性架构

2019独角兽企业重金招聘Python工程师标准>>> 网站系统的伸缩性架构最重要的技术手段就是使用服务器集群功能,通过不断地向集群中添加服务器来增强整个集群的处理能力。“伸”即网站的规模和服务器的规模总是在不断扩大。 1、网站架构的伸缩性设计 网站的…

地图容器自适应浏览器是什么意思_企业官网seo之网站地图优化

网站地图是网站的整体框架,用户通过网站地图,可以清晰的看到网站的主要内容和网站的层次结构,同时,网站地图也是用户最快捷的了解整个网站的地方。所以网站地图在对企业官网seo中有着巨大作用。网站全局的导航。导航对于网站就像黑…

功能性网站开发经验心得

因为本次是全程参与了松松软文新平台的开发,所以卢松松今天把网站开发的一些经验心得写出来,供大家参考。以后大家在迁移新网站的时候,有一个参考依据,我都做了什么,什么时候做,都会列出来,希望…

为什么可以通过request获取session_网站SEO优化推广关键词可以通过哪些途径获取,分析百度搜索原理...

一、百度下拉框,从百度下拉框里可以获取用户在搜索引擎搜索过的关键词,这类词符合用户的搜索习惯。二、百度相关搜索,在搜索引擎页面底部,有个百度相关搜索,这些词也可以选择,这是百度算法根据用户浏览过的…

Linux_基于Docker快速搭建个人博客网站

时间:2017年04月28日星期五 说明:基于docker技术,使用jpress开源框架搭建个人博客网站。特别感谢jpress开源项目。系统版本:CentOS 7.2-64bit。 步骤一:准备Docker环境 1、服务器安装Docker 安装命令: yum …

php 随机在文章中添加锚文本_网站中的内链设置

什么是内部链接? 内部链接能够将网站的一个页面连接到网站的另一个页面。其展现形式如图:当前我们所建立的网站大多以这种方式进行连接。这是一个简单的网站设计和架构问题,搜索引擎也十分喜欢这类型的链接方式。为什么我们需要内部链接&…

i春秋——“百度杯”CTF比赛 十月场——GetFlag(md5碰撞、文件包含、网站绝对路径)...

需要提交的captcha满足等式,肯定就是MD5碰撞了 附上脚本 1 import hashlib2 3 4 def func(md5_val):5 for x in range(1,100000000):6 md5_valuehashlib.md5(str(x)).hexdigest()7 if md5_value[:6]md5_val:8 return str(x)9 10 …

url模糊匹配优化_seo建站优化之URLrewrite

前言: UrlRewrite就是我们通常说的地址重写,用户得到的全部都是经过处理后的URL地址。01 一:提高安全性,可以有效的避免一些参数名、ID等完全暴露在用户面前,如果用户随便乱输的话,不符合规则的话直接会返回…

java cms建站系统源码_Rongcheng CMS 融成Java后台网站内容管理系统 v3.2.1

融成Java后台网站内容管理系统是一款基于Java语言开发的功能强大的内容管理系统。成功实现了既能够管理包括企业官网、门户站点、图片视频软件等上传下载网站、博客网站、电商购物网站、物流管理网站等复杂多级页面和多级栏目的大型网站系统,又使得软件简单易学、易…

快速建站教程

网上有很多网站搭建教程,今天搭建好之后,也来发表一下自己的搭建步骤: 第一步,买域名:一直想搭建一个个人的网站,最近在弄关于服务器的东西,说弄就弄,百度了很多东西,说国…

WEB网站常见受攻击方式及解决办法

2019独角兽企业重金招聘Python工程师标准>>> WEB网站常见受攻击方式及解决办法 一.跨站脚本攻击(XSS) 跨站脚本攻击(XSS,Cross-site scripting)是最常见和基本的攻击WEB网站的方法。攻击者在网页上发布包含攻击性代码的数据。…

新手网站建设必备两款软件WinSCP和XShell 软件下载和使用

早年我们才开始学习网站建设的时候看到拥有个人网站的站长很是羡慕,以为需要精通各种技能才能拥有自己的网站。当然,随着这几年互联网的发展,以及共享软件的出现。即便我们不会程序也可以快速的搭建属于自己的网站。我们只需要购买域名、主机…

静态网站生成器

一些网友应该有些博客的习惯,更高级写法的就搭建自己的网站,在自己的地盘写文章。由于自己比较懒,没有搭建网站,不过收藏了一些网站生成器,拿出来与大家分享一下。 静态网站生成器 Docusaurus Facebook 18年年初刚开源…

Microsoft Azure WebSite创建网站

Microsoft Azure WebSite是Microsoft Azure中PaaS平台既服务到一个重要组件,WebSite具有以下特点,方便我们WEB部署和上线发布 l 入门简单,开始简单,可以按照你的想法扩展,无任何的困难。 l 编码容易,可以使…

企业网站建设为什么要 做手机站,自适应网站有什么优势

随着21世纪移动互联网的盛行,手机站流量占有比例愈发明显,根据统计到目前位置有些行业手机端 流量比例已经超过65%,更有甚者超过80%。那么网站建设就难免面临一个问题,到底 是应该重视手机站还是pc站。如果两个网站的话是不是要两…

织梦网站如何设置404错误页面?

首先在网上搜索织梦系统404错误页面的一个网页或者也可以自己编辑,然后在通过网页编辑器编辑一下这个404网页,然后把里面的网址改为自己的网址,佐言用的是 Macromedia Dreamweaver 8工具编辑的,如下图:第一步、修改404…

爬取五八同城招聘网站上的软件工程师的数据 | 爬虫

本次的模块类似:爬取京东的手机类商品数据 | selenium,但是是使用的requests库和BeautifulSoup库。 1、import from bs4 import BeautifulSoup import pymysql.cursors import requests,urllib.parse,time,datetime2、class Spider: 爬虫源码创建了一…

Nginx 反向代理为什么可以提高网站性能?

2019独角兽企业重金招聘Python工程师标准>>> 作者:张海 链接:https://www.zhihu.com/question/19761434/answer/160935301 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 最高赞回…