swiper 关于h5页面无法触发A标签问题

最新推荐文章于 2024-08-07 15:04:54 发布

杜豫鑫

最新推荐文章于 2024-08-07 15:04:54 发布

阅读量4.8k

点赞数

分类专栏：前端文章标签：终端 android ios 应用

本文链接：https://blog.csdn.net/u013076646/article/details/77995177

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在做h5页面,因为这个h5页面是应用于安卓或ios终端发现一个问题, h5页面无法触发A标签效果,找了很久才发现原因.

下图

此处没有效果,问题是 swiper是基于移动端触摸的,会有一个全局的click事件,这个事件屏蔽了A标签的链接,是为了防止手机滑动的时候不小心触发A标签而设定的,

解决方法：

将preventClicks : false 设置成False就可以了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

杜豫鑫

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Swiper4.0：H5手机端滑屏判断当前页Index并且触发动画（slideChangeTransitionEnd与swiper.activeIndex）

weixin_42450794的博客

08-29

1万+

API： https://www.swiper.com.cn/api/event/92.html var mySwiper = new Swiper('.swiper-container', { direction: 'vertical', loop: true, // 如果需要分页器 pagination: { el: '.swiper-pagination', ...

swiper 上滑触发_四种方式快速实现上滑触底加载效果

weixin_29157533的博客

01-14

1247

在智能小程序的开发过程中，上拉加载是一种十分常见的加载效果，最近也收到了一些开发者在开发上拉加载时遇到的问题，今天的内容就为您介绍一下如果想实现下述效果的上拉加载，我们需要如何去做。以下是为大家总结的四种常见的实现方式：使用 onReachBottom 实现智能小程序提供了onReachBottom，即页面上拉触底事件的处理函数。可以拿在 Page 中定义 onReachBottom 处理函数，监...

参与评论您还未登录，请先登录后发表或查看评论

swiper移动端左右滑动与a标签链接接同时触发解决方案

01-05

swiper移动端左右滑动与a标签链接接同时触发解决方案

swipper插件引起的a链接失效问题

04-19

219

在使用swiper过程中，发现a链接失效，此处没有效果,问题是swiper是基于移动端触摸的,会有一个全局的click事件,这个事件屏蔽了A标签的链接,是为了防止手机滑动的时候不小心触发A标签而设定的, 解决方案：经过查找分析发现是由于没有设置一个参数preventClicks，该参数默认的值是ture，如果需要加入a链接需要设置preventClicks的值为false va...

IOS使用WebView内嵌H5页面，使用a标签点击跳转无效问题解决

最新发布

lizhi1030的博客

08-07

760

在使用WKWebView加载H5时，给文字添加超链接，使其可以点击跳转到某个地址。发现在 IOS 的app内，a标签点击跳转没有作用，无法跳转到正确地址，decidePolicyForNavigationAction也无法抓取到点击事件。但安卓是可以正常跳转。iOS的用户长按链接也是可以打开链接的，不过是打开了个菜单，可以跳转到了浏览器。WKWebView 加载完链接后点击内部链接无法跳转，是因为中的是打开新的页面，所以无法在当前页面打开，需要在当前页重新加载url。

解决:有的网站在浏览器开窗口可以访问,但是在网页里用a标签链接就无法访问

ydZ157的博客

11-16

2494

这是因为目标网站可能做了反爬机制，判断的访问源的Referer，Referer是请求头中的一个参数。那么，如果我想在我的网页中，直接链接跳转到目标网站怎么做呢？新建一个中转页面，将目标地址当做参数传过去，然后在中转页面创建一个iframe，在iframe中进行location跳转，这样就会隐藏当前页面的Refer，从用户体验上，并不会产生差异。上中转页面代码： <!DOCTYPE html> <html> <head> <title&

关于swiper滑动时a标签误触，导致跳转的解决办法。（简单粗暴）

ma_hao99的博客

05-30

1216

var swiper = new Swiper('.swiper-container', { on: { touchStart: function(event){ event.stopPropagation() }, }, });

swiper 绑定点击事件，点击失效的处理以及事件会触发两次问题

MrQiu的博客

08-17

8455

1.前言一般我们写点击事件，都习惯绑定在标签上。img或者外层的div上。这样在loop为false的时候，是没有问题的。当设置loop为true，就有bug了。你会发现当前图片列表循环完一遍，回到第一张的时候，图片的点击事件是无效的，或者是点击很多次才会触发事件。 2.原因设置swiper自动轮播后，你会发现浏览器中渲染的swiper-slide已经不是你数据中的个数了。组件会自动复制第一个和最后一个进行轮播，从而实现无缝连接。但由于只复制slide没有复制点击事件，所以在循环一周回来遇到复制

移动端H5页面左右滑动并加载分页 dropload+swiper

04-19

总之，“dropload+swiper”的组合为移动端H5页面提供了高效、流畅的左右滑动加载分页效果，是构建商品类目展示页面的理想选择。通过熟练掌握这两个插件，开发者可以快速构建出符合用户习惯的交互界面，提升产品整体...

移动端 swiper轮播做下拉加载上拉回到顶部，上下左右轮播功能

03-30

在这个场景中，当用户在滑动轮播时下拉，Swiper 将触发一个事件，从而可以加载新的数据或内容。这在数据实时性要求高的应用中非常实用，例如社交媒体或者新闻应用。 2. **上拉回到顶部（Scroll-to-top）**：这个...

H5页面（八）常见的问题二------填坑

斗师——Ace

06-09

1963

添加小程序，兑换各种视频教程/数据资源。 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS）当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="app...

关于swiper滑动时a标签误触，导致跳转的解决办法

perry

10-25

3611

1、思路：判断swiper.animating==true，滑动的时候把a标签的默认事件给阻止了，否则，让它跳转 2、代码$(".swiper-slide a").click(function(e){ //console.log(swiper.animating) if(swiper.animating==true){ e.preventDef

关于Swiper3.x的a标签bug

Vic

03-30

5280

Swiper3.x，多页a标签部分浏览器无法点击bug

swiper出现划不动解决办法

qq_38220077的博客

12-26

6288

直接上代码 html部分 // HTML <div className="swiper-container swipertwo"> <div className="swiper-wrapper two"> {home.types.map(item=> <div className="swip...

swiper loop为true 第二轮首页点击无效

兔老大的胡萝卜

08-12

367

swiper

vue中用swiper轮播框架loop：true时点击事件失效的解决方法

Mrswater的博客

06-11

3938

问题描述：swiper轮播是可以点击去查看详情的，swiper的loop属性是true，当我们点击第一张图片和向左滑动到最后一张点击时触发不了事件的原因：因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。解决办法：就是不使用vue中的@：click进行操作，...

html中的超链接（a标签）加onclick点击事件