讨论：主动伪类选择器和点击Style后无效样式变化的交互问题，在CSS中出现频率很高，大概仅次于:hover和:focus，但这个选择器其实并没有那么“好用”，这主要表现在以下两个方面，第一是这个伪类选择器在Safari（IOS）中往往不起作用。二是这个伪类选择器和transition过渡动画一起使用时，往往变化缓慢，导致点击反馈不足。本文主要讨论这两个问题。01.Safari(IOS)中:active的问题如果你用过Safari(IOS)，那么你可能已经发现，在这款浏览器中，:active伪类选择器设置后往往不生效，除非是
或被点击的目标元素绑定到touchstart事件。下面是两个简单的demo。第一个demo展示了当Safari（IOS）未绑定touchstart事件时：active伪类选择器不生效。第一个demo第二个demo是Safari（IOS）绑定touchstart事件的情况：active生效：
span/btn/anchor↓View&Code↑span/btn/anchor↓查看&代码↑上面的Demo，点击出现的黑色遮罩，这是由于Safari（IOS）特有的-webkit-tap-highlight-color样式导致的，一般大家会取消这个样式，因为它实现了叠加色。丑陋，功能有限，Demo没有取消，只是为了提示点击操作，设置tabIndex属性，因为如果不设置，点击时不会有叠加颜色交互，/btn/锚点↓View&Code↑span/btn/anchor↓查看和代码↑以上截图是代码在Chrome中运行的结果。事实上，这个问题存在于所有的浏览器中。我们通过改变背景颜色来展示点击交互。Demo02设置了背景色的过渡动画，所以点击的时候，背景色的变化很小，几乎看不出来，那是因为点击一般在100到200毫秒之间完成，而动画时长是500毫秒.按住鼠标按钮可以看到动画结束那么如何解决这个问题呢？取消背景色的过渡动画？这样一来，你猜产品会不会抱怨前端劣质？连悬停时改变背景颜色的动画都做不了……悬停动画和没有动画的点击很难处理。也许我们需要改变我们的想法。点击的交互变化并不一定会改变背景颜色。其他事情也不是不可能，比如改变文字颜色或添加外部阴影？但是这些方法有点非主流，最后的效果可能不好看，那么点击的时候有点波纹怎么办？03.使用xj.ripple波纹插件实现点击交互。如果您使用过Chrome浏览器或Android系统，您会发现它们在面对点击操作时可能会出现波纹。其实这就是MetrialDesign的设计理念。这将使点击交互更加明显。虽然涟漪效应并非谷歌原创（大概？），但谷歌确实让这种交互模式广为人知。XJ对这个效果也很感兴趣，于是写了一个开源插件xj.ripple，用来代替常规的点击交互效果，这里有两个xj.ripple插件的简单例子：span/btn/anchor↓View&Code↑span/btn/anchor↓查看&代码↑第一个demo展示了xj.ripple插件的效果，你只需要在目标节点上加上xj-ripple类名，点击就可以响应涟漪了，不用担心Safari（IOS）无响应，而且你没有担心transition转场动画导致的交互响应慢。你甚至不需要设置:active伪类选择器。第二个Demo展示了插件的自动响应。您甚至不需要添加类名，也不需要更改HTML代码。使用起来更方便。xj.ripple相比业界其他同类ripple解决方案，提供了更多的参数配置，无论是颜色、大小、定位动画，都可以自由控制，并且支持内联属性对象的继承，让参数设置更加简单。简单，最重要的是还可以省去通过全局配置添加类名的麻烦。更多细节请参考xj.ripple的文档。总之，用这个插件显示点击交互既能解决问题又能省代码。还能让交互效果更加生动有趣，何乐而不为呢。参考内容MDUI-rippleMuseUI-rippleMaterialize-rippleStackOverflow-Safari不支持：activeStackOverflow-添加元素到SVG标签MDN-document.createElementNS()方法知-JavaScript为什么不推荐evalVeda-JavaScript探索：eval()isthedevilchromium-修改box-shadowW3C引起的问题-box-shadow圆角溢出算法实现的讨论XJ.Chen-xj.ripple
