百度地图在移动端下click无效的解决方案

最新推荐文章于 2023-11-07 20:13:53 发布

转载最新推荐文章于 2023-11-07 20:13:53 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wm218/p/10721532.html

文章标签：

#javascript #移动开发 #ViewUI

本文介绍了一种在百度地图移动端应用中解决click事件被屏蔽的问题的方法，通过使用touchClick方法模拟click事件，实现了在移动端上的点击交互。代码示例展示了如何使用jQuery插件实现这一解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是由于百度地图在移动端屏蔽了click事件，在网上找到一种方法，利用touchClick方法来模拟click事件，代码如下（需要JQ插件）：

 1 //给jquery添加touchClick方法
 2 (function () {
 3     var defaults = {
 4         start: function (self, event) { },
 5         move: function (self, event) { },
 6         end: function (self, event) { }
 7     }
 8     $.fn.touchClick = function (opts) {
 9         if (typeof opts == "function") {
10             opts = $.extend({}, defaults, { end: opts });
11         } else {
12             opts = $.extend({}, defaults, opts);
13         }
14         this.each(function () {
15             var obj = $(this);
16             obj.bind("touchstart", function (event) {
17                 obj.data("move", false);
18                 opts.start.call(this, event);
19             }).bind("touchmove", function (event) {
20                 console.log(event.originalEvent.targetTouches.length);
21                 obj.data("move", true);
22                 opts.move.call(this, event);
23             }).bind("touchend", function (event) {
24                 if (obj.data("move")) {
25                     return;
26                 } else {
27                     opts.end.call(this, event);
28                 }
29                 obj.data("move", false);
30             });
31         });
32     };
33 })(jQuery);