jq为a标签绑定的onclick事件在移动端不响应

silvertheo 发布于2019-08-23 14:38 / 1905人阅读

摘要：问题描述项目用的进行开发，其中用到的导航栏当页面在移动端打开的时候，导航栏会收缩，就是这样的其中我为下拉菜单的标签在中绑定了事件会议安排一切在端运行正常，但是在移动端的时候，标签绑定的事件在移动端就没有响应。

更新

演示地址可以在开发者工具里看看移动端的表现。不过这个版本是正常工作的，是我已经根据评论区大神来改变了a标签点击事件的绑定方式了的。如下图所示，注释的那行是我原本的代码，注释下面一行是修改过的。

问题描述

项目用的jQuery + Bootstrap进行开发，其中用到Bootstrap的导航栏
当页面在移动端打开的时候，导航栏会收缩，就是这样的：

其中我为下拉菜单的a标签在js中绑定了onclick事件：

jQuery(document).ready(function($){
  "use strict";
   $("#see").click(seeArrange)  // 会议安排
   function seeArrange () {}
   //...
}

一切在PC端运行正常，但是在移动端的时候，a标签绑定的onclick事件在移动端就没有响应。

解决

在网上看了很多方法之后，我觉得可能是移动端收缩之后的那个导航栏容器里的a没有绑定到点击事件。因此我就换成在html里绑定事件，结果就点击正常了。。。

// html 
会议议程


// js
jQuery(document).ready(function($){
  "use strict";
   // $("#see").click(seeArrange)  // 会议安排
   // ...
}

function seeArrange () {}

总结

其实具体原因我不知道是什么，烦请知道的大佬们提点一下我。

网上找的各种方法也说一下吧，做个笔记

很多人是说移动端不支持点击事件，换成touch事件或者tap事件试试。
$("*").bind("click",function(){});  // 在页面初始化时，为其添加事件绑定

参考

IOS微信浏览器点击事件不起作用问题
移动端微信内置浏览器（或QQ浏览器）无法识别onclick事件的解决

服务器托管 GPU服务器 js 标签绑定事件 jq响应式菜单 js清除绑定的事件 html表格的标签为

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100910.html

面试知识点总结

摘要：最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。参考网站面试题图片过多的时候如何优化图标很多的时候可以用雪碧图图片过大时候可以压缩一下。最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是ES6语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。 1.H...

王晗 2019-08-30 14:15 评论0 收藏0
面试知识点总结

摘要：最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。参考网站面试题图片过多的时候如何优化图标很多的时候可以用雪碧图图片过大时候可以压缩一下。最近面试几家前端职位，想知道目前的前端面试题是偏向哪一块，都主要问到的是ES6语法，闭包，原型链，继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。 1.H...

CrazyCodes 2019-08-22 15:46 评论0 收藏0
2018年蚂蚁金服前端一面总结（面向2019届学生）

摘要：在这次蚂蚁金服的电话面试里面认识到了自己很多不足的地方吧。把字符串分割为字符串数组。从起始索引号提取字符串中指定数目的字符。通常消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。先简短的介绍一下我自己吧，我是一个前端学习者，虽然我基础知识也学了比较好，但是许久不用的知识就像流失的水，很容易就忘。在这次蚂蚁金服的电话面试里面认识到了自己很多不足的地方吧。虽然在阿里内推后的人才...

VEIGHTZ 2019-08-22 15:11 评论0 收藏0
2018年蚂蚁金服前端一面总结（面向2019届学生）

摘要：在这次蚂蚁金服的电话面试里面认识到了自己很多不足的地方吧。把字符串分割为字符串数组。从起始索引号提取字符串中指定数目的字符。通常消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。先简短的介绍一下我自己吧，我是一个前端学习者，虽然我基础知识也学了比较好，但是许久不用的知识就像流失的水，很容易就忘。在这次蚂蚁金服的电话面试里面认识到了自己很多不足的地方吧。虽然在阿里内推后的人才...

RobinQu 2019-08-01 18:40 评论0 收藏0