cssmagic / action

Easy and lazy solution for click-event-binding.
95 stars 32 forks source link

所有元素都可以用 Action 来绑定点击事件吗? #23

Open cssmagic opened 9 years ago

cssmagic commented 9 years ago

所有元素都可以用 Action 来绑定点击事件吗?

从技术上来说,Action 对 body 元素内的所有元素生效。但是,我只推荐你对 <a href="..."><button><input type="button"> 等元素使用 Action 来绑定点击事件。

这有几方面的原因,下面一一道来。

语义

上面列出的这些元素都是天生可以与用户进行交互的元素,天生承接用户的点击行为。用户点击它们就是为了触发一些动作,我将它们称为 “动作元素”。

由于这些元素天生具备可交互的特性,浏览器通常也会为它们设置特殊的默认样式,比如暗示可点击的手形鼠标光标、预设的 :hover :focus :active 样式等等。

而除此以外的其它元素大多是以呈现信息为已任,虽然它们也可以被点击、也会产生点击事件,但从语义上看,并不是最佳选择。

移动端

当使用 Action 为 “非动作元素” 绑定动作时,我们会发现在 iOS 浏览器中并不生效。

这是因为 iOS 的浏览器内核对点击事件做了一些 “优化”——如果一个元素不是天生的可交互元素,那么默认情况下:

由此可见,在这类 “非动作元素” 身上使用 Action 存在一定风险。


附:解决方案

当然 iOS 浏览器的这个问题也不是无解的,我们有一些方法可以强制这些 “非动作元素” 响应点击操作:

综上所述,如果你需要对非动作元素使用 Action,就需要对页面应用以下 CSS 规则:

[data-action] {
    cursor: pointer;
}
plh97 commented 6 years ago

哈哈哈哈哈