Question

当我使用jQuery进行简单的点击事件时，它仅适用于链接。有没有办法让它适用于跨度等：

$("span.clicked").live("click", function(e){alert("span clicked!")});

$("a.clicked").live("click", function(e){alert("link clicked!")});

SPAN适用于Safari但不适用于Mobile Safari（适用于iPhone或iPad），而A标签适用于两者。

Answer 1

我也在努力解决这个问题。经过大量的玩弄并试图找出问题后，我遇到了一个简单的解决方案。

如果您将元素的cursor设置为pointer，它会再次与Jquery的live和click事件一起使用。这可以在CSS中全局设置。

Answer 2

您需要倾听“touchstart”和“touchend”事件。使用jQuery添加侦听器...

$('span').bind( "touchstart", function(e){alert('Span Clicked!')} );

您可能希望听一下touchstart和touchend，以便您可以验证手指触摸时定位的元素与手指移除时的目标元素相同。

我确信可能有更好的方法，但应该工作：）

编辑：有更好的方法！见https://stackoverflow.com/a/4910962/16940

Answer 3

您实际上不需要使用touchstart或touchend事件，只要'span'标记（或除'a'标记之外的任何内容）的css属性为：

cursor:pointer

点击将注册

Answer 4

您还可以通过添加空的onclick属性来哄骗浏览器以生成点击事件。对于带式和括号方法，如果任何一种方法在任何给定的iOS更新中停止工作，您可以使用以下内容：

$("span.clicked").live("click", function(e){alert("span clicked!")})
                 .attr('onclick','')
                 .css('cursor','pointer');

（假设你没有任何实际的onclick属性，你不介意删除）

Answer 5

您可以添加空的onclick属性，如下所示：

<span onclick=''>Touch or Click Me</span>
jQuery('span').live('click', function() { alert('foo'); });

Answer 6

我尝试了一切，没有任何技巧奏效。事实证明我无法获得点击事件，因为我的img下有一个视频元素。视频元素显然是点击事件。

Answer 7

我解决document.click上这种误解的方法。

在标签正文下一个标签之后添加到html

[Wed Jul 18 12:50:39.566934 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] [2018-07-18 12:50:39,566] ERROR in app: Exception on /bkr/ server.webpath = "/bkr/" [GET] [Wed Jul 18 12:50:39.566989 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] Traceback (most recent call last): [Wed Jul 18 12:50:39.566998 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/flask/app.py", line 1988, in wsgi_app [Wed Jul 18 12:50:39.567002 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] response = self.full_dispatch_request() [Wed Jul 18 12:50:39.567005 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/flask/app.py", line 1634, in full_dispatch_request [Wed Jul 18 12:50:39.567007 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] self.try_trigger_before_first_request_functions() [Wed Jul 18 12:50:39.567012 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/flask/app.py", line 1660, in try_trigger_before_first_request_functions [Wed Jul 18 12:50:39.567016 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] func() [Wed Jul 18 12:50:39.567019 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/bkr/server/wsgi.py", line 119, in init [Wed Jul 18 12:50:39.567021 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] assets.build_assets() [Wed Jul 18 12:50:39.567024 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/bkr/server/assets.py", line 169, in build_assets [Wed Jul 18 12:50:39.567027 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] bundle.build() [Wed Jul 18 12:50:39.567029 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/webassets/bundle.py", line 682, in build [Wed Jul 18 12:50:39.567032 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] disable_cache=disable_cache)) [Wed Jul 18 12:50:39.567034 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/webassets/bundle.py", line 619, in _build [Wed Jul 18 12:50:39.567054 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] force, disable_cache=disable_cache, extra_filters=extra_filters) [Wed Jul 18 12:50:39.567057 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/webassets/bundle.py", line 543, in _merge_and_apply [Wed Jul 18 12:50:39.567060 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] kwargs=item_data) [Wed Jul 18 12:50:39.567062 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/webassets/merge.py", line 276, in apply [Wed Jul 18 12:50:39.567065 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] return self._wrap_cache(key, func) [Wed Jul 18 12:50:39.567067 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/webassets/merge.py", line 218, in _wrap_cache [Wed Jul 18 12:50:39.567070 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] content = func().getvalue() [Wed Jul 18 12:50:39.567072 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/webassets/merge.py", line 251, in func [Wed Jul 18 12:50:39.567075 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] getattr(filter, type)(data, out, **kwargs_final) [Wed Jul 18 12:50:39.567077 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/webassets/filter/less.py", line 139, in input [Wed Jul 18 12:50:39.567080 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] self._apply_less(_in, out, source_path) [Wed Jul 18 12:50:39.567082 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/webassets/filter/less.py", line 131, in _apply_less [Wed Jul 18 12:50:39.567085 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] self.subprocess(args, out, in_) [Wed Jul 18 12:50:39.567087 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] File "/usr/lib/python2.7/site-packages/webassets/filter/__init__.py", line 527, in subprocess [Wed Jul 18 12:50:39.567090 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] proc.returncode, stdout, stderr)) [Wed Jul 18 12:50:39.567095 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] FilterError: less: subprocess returned a non-success result code: 1, stdout=, stderr=\x1b[31mNameError: #grid > .core > .span is undefined\x1b[39m\x1b[31m in \x1b[39mbootstrap/less/navbar.less\x1b[90m on line 199, column 3:\x1b[39m [Wed Jul 18 12:50:39.567099 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] \x1b[90m198 .navbar-fixed-bottom .container {\x1b[39m [Wed Jul 18 12:50:39.567101 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] 199 \x1b[7m\x1b[31m\x1b[1m#\x1b[22mgrid > .core > .span(@gridColumns);\x1b[39m\x1b[27m [Wed Jul 18 12:50:39.567104 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] \x1b[90m200 }\x1b[39m\x1b[0m\x1b[0m [Wed Jul 18 12:50:39.567106 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010] [Wed Jul 18 12:50:39.567109 2018] [wsgi:error] [pid 3400] [remote 10.38.33.62:61010]

该标签的某些样式

<body>
    <div id="overlaySection" onclick="void(0)"></div>
    ...
</body>

一些JQuery人员

`#overlaySection { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(255, 255, 255, 0); cursor: pointer; visibility: hidden; opacity: 0; content: ""; } #overlaySection.active { opacity: 1; visibility: visible; }`

以及激活该叠加层的主要目的

// hide overlay on document click
$('#overlaySection').click(function(){
    $(this).removeClass('active');
});

希望这种方法对某人有用。编码愉快！

Answer 8

在定位iOS时，您必须考虑以下因素：在jQuery中像$(document).on('click', '.target-element', function (event) {...});那样进行事件委托将不起作用。您必须将onclick=""添加到目标HTML元素或将cursor: pointer添加到其样式。

从http://gravitydept.com/blog/js-click-event-bubbling-on-ios改编而来：

事实证明，iPhone上的Safari不支持单击事件的事件委托，除非单击发生在链接或输入上。幸运的是，有一些解决方法。

这就是<a>标签有效而<span>无效的原因。

如何在iPhone Web应用程序中使用jQuery进行单击事件

8 个答案: