{"id":3886,"date":"2014-01-04T02:23:44","date_gmt":"2014-01-03T18:23:44","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=3886"},"modified":"2014-01-04T19:58:20","modified_gmt":"2014-01-04T11:58:20","slug":"pointer-events-none-avoiding-unnecessary-paints","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2014\/01\/pointer-events-none-avoiding-unnecessary-paints\/","title":{"rendered":"pointer-events:none\u63d0\u9ad8\u9875\u9762\u6eda\u52a8\u65f6\u5019\u7684\u7ed8\u5236\u6027\u80fd\uff1f"},"content":{"rendered":"<p>by <a href=\"http:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"http:\/\/www.zhangxinxu.com\/\">http:\/\/www.zhangxinxu.com<\/a><br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=3886\">http:\/\/www.zhangxinxu.com\/wordpress\/?p=3886<\/a><\/p>\n<p><script>document.createElement(\"time\");<\/script><\/p>\n<style>\n.fix{*zoom:1;}\n.fix:after,.bq_author:after{display:table; content:''; clear:both;}\n.bq_box { counter-increment: number; }\n.bq_box::before { content:counter(number); position: absolute; margin-left: -8px; margin-top: 10px; font-size: 12px; font-family: arial; }\n.float_two { width:49.8%; float:left; }\n.bq_title { font-size:12px; }\n.bq_title img { margin-bottom:-3px; margin-right:5px; }\n.bq_title i { color:#333; }\n.bq_time small { font-family:simsun; }\n.bq_content { padding:3px 0 5px; font-size:14px; color:#333; font-family:Tahoma, Geneva, sans-serif; }\n.entry .bq_author { margin:10px; padding: 8px 20px; border-left:5px solid #cad5eb; background-color:#f0f3f9; color:#666; *zoom:1; font-size:12px; }\n.bq_author:before { content:''; float:left; width:32px; height:32px; margin-right:10px; background:url(http:\/\/1.gravatar.com\/avatar\/3e58242902fa8f33162f3f10df892c68?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G) no-repeat;}\n.bq_valign { display: inline-block; margin-top: 5px; }\n.img_hide_right{width:100%;overflow:hidden;text-align:right;}\n.img_hide_right img{max-width:none;float:right;}\n<\/style>\n<h3>\u4e00\u3001\u6545\u4e8b\u662f\u8fd9\u4e48\u53d1\u751f\u7684<\/h3>\n<p>\u5f88\u4e45\u5f88\u4e45\u4ee5\u524d\u2026\u2026\u8fd8\u6ca1\u6709<code>pointer-events<\/code>, \u56e0\u6b64\u6545\u4e8b\u4e0d\u662f\u53d1\u751f\u5728\u5f88\u4e45\u5f88\u4e45\u4ee5\u524d\uff0c\u800c\u662f\u5c31\u53d1\u751f\u524d\u524d\u4e2a\u6708\u3002\u90a3\u662f\u4e2a\u61d2\u6563\u7684\u4e0b\u5348\uff0c\u6e29\u6696\u7684\u9633\u5149\u900f\u8fc7\u843d\u5730\u7a97\u60a0\u7136\u5730\u6d12\u5728\u529e\u516c\u684c\u4e0a\uff0c\u5c31\u5728\u8fd9\u4e2a\u60ec\u610f\u7684\u65f6\u5019\uff0c\u6211\u7785\u89c1\u4e86\u8fd9\u4e48\u4e00\u6761\u5fae\u535a\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-02_195914.png\" width=\"501\" height=\"531\" alt=\"\u5fae\u535a\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p>\u54df\uff0c\u8f6c\u53d1\u8e6d\u8e6d\u8e6d\u4e0a\u4e863\u4f4d\u6570\uff0c\u4e0d\u9519\u54e6\uff01\u6b64tip\u6e90\u81eathecssninja.com\u4e0a<a href=\"http:\/\/www.thecssninja.com\/javascript\/pointer-events-60fps\">60fps scrolling using pointer-events: none<\/a>\u4e00\u6587\u3002<\/p>\n<p>\u8fd9\u79cd\u7ed3\u8bba\u76f4\u63a5\uff0c\u901a\u4fd7\u597d\u8bb0\u7684\u5947\u6deb\u6280\u5de7\u4f3c\u4e4e\u9887\u53d7\u5927\u5bb6\u559c\u6b22\u3002\u77e5\u9053\u5373GET! \u65e0\u9700\u52a8\u8111\uff0c\u65e0\u9700\u6df1\u5165\u601d\u8003\uff0c\u81ea\u7136\u5927\u5bb6\u90fd\u559c\u6b22\u3002\u8fd8\u6709\u56fd\u4eba\u7ffb\u8bd1\u4e86\u8fd9\u7bc7\u6587\u7ae0\uff1a<a href=\"http:\/\/www.html-js.com\/article\/1598\">[\u8bd1]\u4f7f\u7528pointer-events:none\u5b9e\u73b060fps\u6eda\u52a8<\/a>\u3002<\/p>\n<p>\u6545\u4e8b\u4f3c\u4e4e\u633a\u7f8e\u597d\uff0c\u767d\u96ea\u516c\u4e3b\u548c\u738b\u5b50\u76f8\u9047\uff0c\u4ece\u6b64\u5e78\u798f\u5730\u5728\u4e00\u8d77\uff01\u7136\u540e\uff0c\u4f17\u7c89\u7eb7\u7eb7\u6548\u4eff\u91c7\u7528\uff0c\u4e5f\u5e0c\u671b\u5f97\u5230\u5e78\u798f\u2026\u2026<\/p>\n<p>\u5982\u679c\u6545\u4e8b\u5c31\u6b64happy ending\u7ed3\u675f\uff0c\u4f3c\u4e4e\u7686\u5927\u6b22\u559c\u3002\u4f46\u662f\uff0c\u62b1\u6b49\uff0c\u53ea\u6709\u7ae5\u8bdd\u6545\u4e8b\u624d\u4f1a\u8fd9\u6837\u3002\u4ee3\u7801\u82e5\u6c5f\u6e56\uff0c\u8840\u96e8\u4e0e\u8165\u98ce\uff0c\u6d3b\u8131\u8131\u73b0\u5b9e\u4e16\u754c\u3002\u56e0\u6b64\uff0c\u767d\u96ea\u516c\u4e3b\u548c\u738b\u5b50\u76f8\u9047\u4e4b\u540e\u7684\u6545\u4e8b\u4e0d\u80fd\u4e0d\u63d0\uff0c\u6bd4\u65b9\u8bf4\u738b\u5b50\u4e00\u76f4\u5947\u602a\u201c\u4e3a\u4f55\u81ea\u5df1\u5b50\u5973\u90fd\u5f88\u77ee\u201d\u8fd9\u6837\u7684\u573a\u666f\u3002<\/p>\n<p>\u6211\u5e0c\u671b\u90a3\u767e\u6765\u4e2a\u8f6c\u53d1\u7684\u7ae5\u978b\u80fd\u770b\u5230\u672c\u6587\uff0c\u5426\u5219\uff0c\u5c31\u4e0d\u4f1a\u5174\u81f4\u52c3\u52c3\u4ee5\u4e3a\u65b0\u6280\u80fdget\uff0c\u5e78\u798f\u751f\u6d3bcoming\u5462\uff01<\/p>\n<h3>\u4e8c\u3001\u6000\u7591\u4e0e\u771f\u7406\u7684\u63a2\u7a76<\/h3>\n<p>\u54c8\u4f5b\u7684\u6821\u8bad\u7b80\u5355\u800c\u4e0d\u7b80\u5355\uff1a<strong>\u771f\u7406<\/strong>\uff01<\/p>\n<p>\u8bf4\u7b80\u5355\u662f\u56e0\u4e3a\u5c31\u4e00\u4e2a\u5355\u8bcd\uff0c\u4e24\u4e2a\u6c49\u5b57\u3002\u6bd4\u80cc\u9c81\u8fc5\u7684\u6587\u7ae0\u7b80\u5355<code><em>value<\/em> = PM2.5<\/code>\u500d\u3002\u8bf4\u4e0d\u7b80\u5355\uff0c\u662f\u56e0\u4e3a\u8981\u505a\u5230\u5f88\u96be\u3002<\/p>\n<p>\u771f\u7406\u8fd9\u4e1c\u897f\u662f\u9700\u8981\u4e0d\u65ad\u63a2\u7a76\u7684\uff0c\u662f\u8981\u4e0d\u65ad\u8d28\u7591\u4e0e\u8bba\u8bc1\u7684\u3002<\/p>\n<p>\u5c0f\u5b66\u5e94\u8be5\u5b66\u8fc7\u201c\u4e24\u4e2a\u94c1\u7403\u201d\u7684\u6545\u4e8b\uff1a\u8d85\u8457\u540d\u54f2\u5b66\u5bb6\u4e9a\u91cc\u58eb\u591a\u5fb7\u8ba4\u4e3a\uff0c10\u65a4\u7684\u94c1\u7403\u548c1\u65a4\u7684\u94c1\u7403\u540c\u65f6\u5f80\u4e0b\u843d\uff0c10\u65a4\u7684\u90a3\u4e2a\u7403\u901f\u5ea6\u8981\u5feb10\u500d\u3002\u7ed3\u679c\u4f3d\u5229\u7565\u5728\u8457\u540d\u7684\u6bd4\u8428\u659c\u5854\u4e00\u5b9e\u9a8c\uff0c\u8bc1\u5b9e\u4e24\u4e2a\u94c1\u7403\u540c\u65f6\u843d\u5730\uff0c\u8fd9\u5c31\u662f\u771f\u7406\u7684\u63a2\u7a76\u3002<\/p>\n<p>\u9996\u5148\uff0c\u8981\u6562\u4e8e\u6000\u7591\u6743\u5a01\uff1b\u5176\u6b21\u8981\u81ea\u5df1\u5927\u80c6\u8bd5\u9a8c\u8ba4\u8bc1\uff1b\u6700\u540e\u8981\u52c7\u4e8e\u63d0\u51fa\u81ea\u5df1\u7684\u89c2\u70b9\u3002<\/p>\n<p>\u8fd9\u6709\u70b9\u7c7b\u4f3c\u4e8e\u6211\u4eec\u5e38\u8bf4\u7684\u201c<strong>\u79d1\u7814\u7cbe\u795e<\/strong>\u201d\uff01<\/p>\n<p>\u4f46\u662f\uff0c\u4eba\u5404\u6709\u5fd7\u3002\u5f88\u591a\u540c\u5b66\u5c31\u60f3\u6df7\u53e3\u996d\u5403\uff0c\u5f88\u591a\u540c\u5b66\u5e0c\u671b\u7684\u662f\u6765\u94b1\u591a\uff0c\u6765\u94b1\u5feb\u3002\u201c\u63a2\u6c42\u771f\u7406\u201d\u8fd9\u79cd\u770b\u4e0d\u5230\u77ed\u671f\u5229\u76ca\u7684\u4e8b\u60c5\u7740\u5b9e\u4e0d\u662f\u4ed6\u4eec\u559c\u6b22\u7684\u3002<\/p>\n<div style=\"color:#666;\">\u54c8\u4f5b\u6821\u8bad20\u6761\u2014\u2014get it!<br \/>\n\u53cd\u590d\u716e\u6cb8\u7684\u6c34\u4e0d\u80fd\u559d\u2014\u2014get it!<br \/>\n\u7ef4C\u4e0d\u80fd\u548c\u867e\u4e00\u8d77\u5403\uff0c\u4f1a\u4e2d\u6bd2\u2014\u2014get it!<br \/>\npointer-events:none\u63d0\u9ad8\u6eda\u52a8\u7ed8\u5236\u6027\u80fd\u2014\u2014get it!<\/div>\n<p>\u7c7b\u4f3c\u4e0a\u9762\u8fd9\u4e9b\u5feb\u9910\u5f0f\u7684\u8bba\u70b9\uff0c\u5f80\u5f80\u8fd9\u4e9b\u540c\u5b66\u4e50\u4e8e\u63a5\u53d7\uff0c\u5e76\u751a\u81f3\u4f5c\u4e3a\u771f\u7406\u3002\u5f53\u7136\uff0c\u4e0d\u5f71\u54cd\u6b63\u5e38\u7684\u751f\u5b58\u3002\u4e0d\u8fc7\u4f3c\u4e4e\u5c31\u662f\u51e0\u5341\u4ebf\u4eba\u53e3\u4e2d\u90a3\u82b8\u82b8\u4f17\u751f\u4e2d\u7684\u4e00\u4e2a\u3002\u5728\u4e0a\u5e1d\u770b\u6765\uff0c\u4f3c\u4e4e\u6ca1\u6709\u4ec0\u4e48\u7279\u522b\u7684\u533a\u5206\u5ea6\uff0c\u53ef\u6709\u53ef\u65e0\u3002\u4e0d\u8fc7\uff0c\u8fd9\u4e9b\u540c\u5b66\u672c\u8eab\u5c31\u662f\u5e0c\u671b\u5e73\u5e73\u51e1\u51e1\u3001\u9ed8\u9ed8\u65e0\u95fb\u8fc7\u4e00\u751f\uff0c\u56e0\u6b64\uff0c\u6211\u89c9\u5f97\u633a\u597d\u7684\u3002\u867d\u7136\uff0c\u4e0a\u97624\u6761\u57fa\u672c\u4e0a\u90fd\u662f\u5047\u7684\uff01<\/p>\n<p>thecssninja\u90a3\u7bc7\u6587\u7ae0\u7684\u89c6\u9891\u771f\u771f\u5207\u5207\u663e\u793a\u4e86\u7ed8\u5236\u6027\u80fd\u63d0\u9ad8\u4e86\u54c8\uff0c\u8c8c\u4f3c\u6709\u540c\u884c\u4eb2\u81ea\u6d4b\u8bd5\uff0c\u90a3\u6761\u5fae\u535aGif\u622a\u56fe\u5c31\u80fd\u8bf4\u660e\u95ee\u9898\u554a\uff01\u8fd9\u4e9b\u90fd\u662f\u6d3b\u8131\u8131\u7684\u8bc1\u636e\u554a\uff0c\u600e\u4e48\u53ef\u80fd\u201cpointer-events:none\u63d0\u9ad8\u6eda\u52a8\u7ed8\u5236\u6027\u80fd\u201d\u662f\u5047\u7684\u5462\uff01<\/p>\n<p>\u90a3\u6211\u8981\u53cd\u95ee\u4e0b\u8bf8\u4f4d\u4e86\uff1a<br \/>\n1. \u6240\u6709\u7684\u6d4b\u8bd5\u4f3c\u4e4e\u90fd\u662fChrome\u6d4f\u89c8\u5668\uff0cFireFox\u6d4f\u89c8\u5668\u6d4b\u8bd5\u4e86\u6ca1\uff0cIE\u5462\uff1f\u79fb\u52a8\u8bbe\u5907\u5462\uff1f<br \/>\n2. \u6240\u6709\u6d4b\u8bd5\u90fd\u662f\u8f83\u65b0\u7248\u672c\u7684Chrome\u6d4f\u89c8\u5668\uff0c\u65e7\u7248\u672c\u7684\u4e5f\u662f\u8fd9\u6837\u5417\uff1f<br \/>\n3. \u6d4b\u8bd5\u9875\u9762<code>box-shadow<\/code>\u76d2\u9634\u5f71\u6548\u679c\u4e3a\u4e3b\uff0c\u5982\u679c\u662f\u5176\u4ed6UI\u6548\u679c\uff0c\u4e5f\u4f1a\u662f\u8fd9\u4e2a\u7ed3\u679c\u5417\uff1f<br \/>\n4. <code>pointer-events:none<\/code>\u6837\u5f0f\u5e94\u7528\u672c\u8eab\u5c31\u6d89\u53ca\u91cd\u7ed8\uff0c\u8fd9\u4e2a\u6027\u80fd\u5f71\u54cd\u6709\u6ca1\u6709\u8003\u8651\u8fdb\u53bb\uff1f<br \/>\n5. \u8be5\u65b9\u6cd5\u7ecf\u8fc7\u5b9e\u9645\u573a\u666f\u7684\u9a8c\u8bc1\u4e86\u5417\uff0c\u80fd\u5426\u5e94\u5bf9\u5404\u79cd\u5e94\u7528\u573a\u666f\uff1f<br \/>\n6. \u6709\u6ca1\u6709\u76f8\u5173\u5176\u4ed6\u65b9\u6cd5\u589e\u5f3a\u6027\u80fd\uff0c\u4f8b\u5982\u8986\u76d6\u4e00\u4e2adiv\u5c42\uff1f<\/p>\n<p>\u5982\u679c\u6700\u540e\u7684\u7ed3\u8bba\u662f\uff0c\u53ea\u6709\u6700\u65b0PC\u7248\u672c\u7684Chrome\u6d4f\u89c8\u5668\u624d\u6709\u6b64\u6027\u80fd\u63d0\u9ad8\uff0c\u60a8\u8fd8\u4f1a\u5982\u6b64\u5174\u594b\uff0c\u4ee5\u4e3a\u8f7b\u8f7b\u677e\u677e\u6361\u4e86\u4e2a\u5b9d\u5417\uff1f<\/p>\n<h3>\u4e09\u3001pointer-events:none\u77e5\u8bc6\u5feb\u8865<\/h3>\n<p>\u65e9\u57282011\u5e74\u7684\u65f6\u5019\uff0c\u6211\u5c31\u7740\u91cd\u4ecb\u7ecd\u4e86<code>pointer-events:none<\/code>\u8fd9\u4e2a\u58f0\u660e\uff0c\u53ef\u53c2\u8003\u4e4b\u524d\u7684\u6587\u7ae0\u201c<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=2091\">CSS3 pointer-events:none\u5e94\u7528\u4e3e\u4f8b\u53ca\u6269\u5c55<\/a>\u201d\u3002\u5176\u4e2d\u4e0d\u4ec5\u6709\u5b9e\u4f8b\u5e94\u7528\uff0c\u4ee5\u53ca\u5176\u4ed6\u4e0d\u652f\u6301\u6d4f\u89c8\u5668\u7684\u517c\u5bb9\u65b9\u6848\u3002\u63a8\u8350\u770b\u4e0b\u3002<\/p>\n<p>\u6211\u4e2a\u4eba\u5c06<code>pointer-events:none<\/code>\u7406\u89e3\u4e3a\u201c\u5e7b\u5f71\u7279\u6027\u201d\u3002\u539f\u8bdd\u5982\u4e0b\uff1a<\/p>\n<blockquote><p>pointer-events:none\u7684\u4f5c\u7528\u662f\u8ba9\u5143\u7d20\u5b9e\u4f53\u201c\u865a\u5316\u201d\u3002\u4f8b\u5982\u4e00\u4e2a\u5e94\u7528pointer-events:none\u7684\u6309\u94ae\u5143\u7d20\uff0c\u5219\u6211\u4eec\u5728\u9875\u9762\u4e0a\u770b\u5230\u7684\u8fd9\u4e2a\u6309\u94ae\uff0c\u53ea\u662f\u4e00\u4e2a\u865a\u5e7b\u7684\u5f71\u5b50\u800c\u5df2\uff0c\u60a8\u53ef\u4ee5\u7406\u89e3\u4e3a\u6d77\u5e02\u8703\u697c\uff0c\u5e7d\u7075\u7684\u8eaf\u4f53\u3002\u5f53\u6211\u4eec\u7528\u624b\u89e6\u78b0\u5b83\u7684\u65f6\u5019\u53ef\u4ee5\u8f7b\u6613\u5730\u6ca1\u6709\u4efb\u4f55\u611f\u89c9\u5730\u4ece\u4e2d\u7a7f\u8fc7\u53bb\u3002<br \/>\n\u4e00\u5207\u90fd\u662f\u5e7b\u5f71!<\/p><\/blockquote>\n<p>\u6211\u4ece\u7ef4\u57fa\u4e0a\u627e\u5230\u7684\u89e3\u91ca\u662f\uff1a<strong>\u7528\u6237\u53d1\u8d77\u7684\u5149\u6807\u79fb\u52a8\u6216\u5bf9\u8c61\u9009\u62e9\u7b49<\/strong><\/p>\n<p>\u5982\u679c\u6211\u4eec\u5728<code>body<\/code>\u6807\u7b7e\u4e0a\u5e94\u7528\u8be5CSS\u58f0\u660e\uff0c\u5219\u6574\u4e2a\u9875\u9762\uff08\u5982\u679c\u5185\u90e8\u6ca1\u6709\u5176\u4ed6<code>pointer-events<\/code>\u8bbe\u7f6e\uff09\u5c31\u50cf\u662f\u4e00\u4e2a\u80cc\u666f\u56fe\u7247\u7684\u5b58\u5728\u3002\u4e0d\u80fd\u9009\u4e0d\u80fd\u70b9\u4e0d\u80fd\u76f8\u5e94<code>hover<\/code>\uff0c\u5e7b\u5f71\u800c\u5df2\u3002<\/p>\n<h3>\u56db\u3001\u8bc4\u8bba\u4e2d\u7684\u96c6\u4f53\u667a\u6167<\/h3>\n<p>\u4e00\u4e2a\u5fae\u535a\u8981\u60f3\u6210\u4e3a\u7ecf\u5178\uff0c\u5fc5\u987b\u8981\u6709\u795e\u6700\u53f3\u7684\u652f\u6301\u3002\u4e00\u4e2a\u77e5\u8bc6\u4f53\u7cfb\u9700\u8981\u5b8c\u5584\uff0c\u4e5f\u9700\u8981\u767e\u5bb6\u4e4b\u8a00\u3002<\/p>\n<p>\u65b0\u6280\u80fdtip\u7684\u51fa\u73b0\uff0c\u5982\u679c\u53ea\u770b\u6587\u7ae0\u4e3b\u4f53\u4ecb\u7ecd\uff0c\u4f3c\u4e4e\u53c8\u96fe\u91cc\u770b\u82b1\u6c34\u4e2d\u671b\u6708\u4e4b\u611f\u3002\u70b9\u8bc4\u7f51\u4e3a\u4ec0\u4e48\u5f88\u591a\u4eba\u53bb\u770b\uff0c\u662f\u56e0\u4e3a\u5546\u5bb6\u7684\u4ecb\u7ecd\u5417\uff1f\u663e\u7136\u662f\u56e0\u4e3a\u51fa\u5f69\u6709\u4ef7\u503c\u7684\u70b9\u8bc4\u3002<\/p>\n<p>thecssninja\u8fd9\u7bc7\u6587\u7ae0\u663e\u7136\u4e5f\u662f\u5982\u6b64\u3002<\/p>\n<p>\u5982\u679c\u60a8\u5355\u7eaf\u770b\u6587\u7ae0\u7684\u7ed3\u8bba\uff0c\u90a3\u4f60\u53ef\u5c31\u9519\u8fc7\u4e86\u5f88\u591a\u7cbe\u5f69\u7684\u5185\u5bb9\u3002<\/p>\n<p>\u6211\u4eec\u4ece\u4e0a\u5f80\u4e0b\uff08\u65f6\u95f4\u987a\u5e8f\uff09\u4e00\u6761\u4e00\u6761\u8fc7\u4e00\u4e0b\uff08\u7248\u5f0f\u5f88\u8003\u7a76\uff0c\u5982\u679c\u60a8\u53d1\u73b0\u5e03\u5c40shit\u4e00\u822c\uff0c\u8bf7\u8bbf\u95ee\u539f\u51fa\u5904\uff09\uff1a<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/4b7871e2f0ac8d4e244455f543330e22?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ekrem Buyukkaya<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 26, 2013 at 3:06 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Brilliant.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/4b7871e2f0ac8d4e244455f543330e22?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ekrem Buyukkaya<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-26 3:06<\/small><\/time><\/p>\n<div class=\"bq_content\">\u806a\u660e\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u9171\u6cb9\u8bc4\u8bba\uff01<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/dd60af940773439f1b0c684a3af6db68?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Chris<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 26, 2013 at 6:04 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Wonder if there are any side effects\u2026<br \/>BTW, the demo works nicely in IE11 too, Shows the same difference in the Performance tab in the new F12 Tools.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/dd60af940773439f1b0c684a3af6db68?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Chris<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-26 6:04<\/small><\/time><\/p>\n<div class=\"bq_content\">\u4e0d\u77e5\u9053\u6709\u6ca1\u6709\u5176\u4ed6\u526f\u4f5c\u7528&#8230;<br \/>\u987a\u4fbf\u8bf4\u4e00\u53e5\uff0c\u5728IE11\u6d4f\u89c8\u5668\u4e0b\uff0c\u901a\u8fc7F12\u6253\u5f00\u6027\u80fd\u6d4b\u8bd5\u9009\u9879\u5361\u8fdb\u884c\u6027\u80fd\u6d4b\u8bd5\uff0c\u51fa\u73b0\u4e86\u540c\u6837\u7684\u5dee\u5f02\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<div class=\"bq_author\">\/\/zxx: \u5f88\u8d5e\u7684\u540c\u884c\u3002\u7b2c\u4e00\u53e5\u63d0\u51fa\u7591\u95ee\uff0c\u6000\u7591\u5176\u526f\u4f5c\u7528\uff1b\u7b2c\u4e8c\u53e5\u81ea\u5df1\u5b9e\u8df5\uff0c\u5728IE11\u6d4f\u89c8\u5668\u4e0b\u6d4b\u8bd5\u3002\u4eb2\u81ea\u9a8c\u8bc1\u65b9\u6cd5\u7684\u53ef\u884c\u6027\u3002\u5b8c\u5168\u7b26\u5408\u6211\u4e0a\u9762\u63d0\u5230\u7684\u5bf9\u201c\u771f\u7406\u7684\u63a2\u7a76\u201d\u3002\u5bf9\u6bd4\u4e0b\u81ea\u5df1\uff0c\u5982\u679c\u4f60\u9047\u5230\u8fd9\u6837\u7684\u72b6\u51b5\uff0c\u4f1a\u6000\u7591\u5417\uff1f\u4f1a\u81ea\u5df1\u6d4b\u8bd5\u5417\uff1f\u5982\u679c\u6ca1\u6709\uff0c\u53ef\u80fd\u9700\u8981\u53cd\u601d\u4e0b\u4e86\u3002<\/p>\n<p>\u8fd9\u91cc\u8bc4\u8bba\u8bf4IE11\u4e0b\u6d4b\u8bd5\u7ed3\u679c\u4e00\u81f4\uff0c\u4f60\u662f\u76f8\u4fe1\u5462\u8fd8\u662f\u6000\u7591\u5462\uff1f\u4f60\u662f\u76f4\u63a5\u63a5\u53d7\u4e86\u8fd9\u4e2a\u89c2\u70b9\u5462\uff1f\u8fd8\u662f\u4f1a\u81ea\u5df1\u5728IE11\u4e0b\u6d4b\u8bd5\u4e00\u904d\uff1f\u662f\u771f\u662f\u5047\uff0c\u662f\u5bf9\u662f\u9519\uff0c\u54b1\u63a5\u7740\u5f80\u4e0b\u770b\uff01<\/p><\/div>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/0d8ffc5127d2781ea16ac8b43c93ec41?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Benz<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 26, 2013 at 6:54 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Jesuz so simple and so powerful \u2013 thx!<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/0d8ffc5127d2781ea16ac8b43c93ec41?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Benz<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-26 6:54<\/small><\/time><\/p>\n<div class=\"bq_content\">\u597d\u7b80\u5355\u597d\u5f3a\u5927 &#8211; \u591a\u8c22\uff01<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u5178\u578b\u7684\u62ff\u6765\u4e3b\u4e49\u8005\u3002\u5feb\u9910\u901f\u98df\u8005\u3002\u4f46\u81f3\u5c11\u4eba\u5bb6\u8fd8\u4f1a\u8bc4\u8bba\u4ee5\u8868\u793a\u611f\u8c22\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/99c0c51117b8ec8c7c5652f3c2f54846?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Tyler<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 26, 2013 at 8:01 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Just a note, this won\u2019t work with fullscreen applications that rely on content panels using `overflow: auto`, as `pointer-events: none` on the body element won\u2019t register the scroll events. It appears the pointer-events property needs to be applied to a container within the scrollable area.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/99c0c51117b8ec8c7c5652f3c2f54846?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Tyler<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-26 8:01<\/small><\/time><\/p>\n<div class=\"bq_content\">\u8fd9\u91cc\u8981\u6ce8\u610f\u4e0b\uff0c\u8fd9\u4e2a\u5bf9\u4e8e\u5185\u5bb9\u9762\u677f\u9700\u8981\u4f7f\u7528<code>overflow: auto<\/code>\u5168\u5c4f\u5e94\u7528\u4e0d\u9002\u7528\uff0c\u56e0\u4e3a<code>pointer-events: none<\/code>\u5e94\u7528\u5728<code>body<\/code>\u5143\u7d20\u4e0a\u7684\u65f6\u5019\u4e0d\u4f1a\u6ce8\u518c\u6eda\u52a8\u4e8b\u4ef6\u3002\u4f3c\u4e4e<code>pointer-events<\/code>\u5c5e\u6027\u9700\u8981\u5e94\u7528\u5728\u6709\u6eda\u52a8\u533a\u57df\u7684\u5bb9\u5668\u4e0a\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u8fd9\u4e2a\u7b97\u662f\u4e00\u4e2a\u8865\u5145tip. \u54ea\u4e2a\u6eda\u52a8\u54ea\u4e2a\u5e94\u7528<code>pointer-events: none<\/code>. \u662f\u4e0d\u662f\u5e94\u8be5\u81ea\u5df1\u6d4b\u8bd5\u4e0b\uff1f\u6ca1\u9519\uff0c\u540e\u9762\u4f1a\u5c55\u793a\u6211\u7684\u6d4b\u8bd5\u7ed3\u679c\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/ed4279256911f600867ed4519ec5c945?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Malte Ubl<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 26, 2013 at 9:14 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Simple, but doesn\u2019t work as well as you think because this approach makes the document unclickable for up to 500ms after scrolling end. Here is an explanation how to fix it<a href=\"https:\/\/plus.google.com\/+MalteUbl\/posts\/NsyYKenqYNP\">https:\/\/plus.google.com\/+MalteUbl\/posts\/NsyYKenqYNP<\/a><\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/ed4279256911f600867ed4519ec5c945?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Malte Ubl<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-26 9:14<\/small><\/time><\/p>\n<div class=\"bq_content\">\u5f88\u660e\u663e\uff0c\u8fd9\u53ae\u4e0d\u4f1a\u5982\u4f60\u6240\u60f3\u90a3\u822c\u5de5\u4f5c\u3002\u56e0\u6b64\uff0c\u5b83\u4f1a\u8ba9\u9875\u9762\u5728\u6eda\u52a8\u7ed3\u675f\u540e500\u6beb\u79d2\u5185\u6ca1\u6cd5\u70b9\u51fb\u3002\u8fd9\u663e\u7136\u4f1a\u6709\u95ee\u9898\uff0c\u4e0b\u9762\u8fd9\u4e2a\u53ef\u4ee5\u4fee\u590d\u8fd9\u4e2a\u95ee\u9898<br \/><a href=\"https:\/\/plus.google.com\/+MalteUbl\/posts\/NsyYKenqYNP\">https:\/\/plus.google.com\/+MalteUbl\/posts\/NsyYKenqYNP<\/a>.<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u8be5\u8bc4\u8bba\u7ed9\u51fa\u7684\u94fe\u63a5\u4f3c\u4e4e\u8981\u722c\u68af\u5b50\u7684\u5e72\u6d3b\u3002\u6211\u53f8\u5929\u7136\u7ffb\u5899\uff0c\u4e8e\u662f\u622a\u4e2a\u56fe\u7ed9\u5927\u5bb6\u770b\u770b\uff1a<br \/><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-03_155717.png\" width=\"505\" height=\"400\" style=\"margin-top:5px;\"><br \/>\u5176\u89e3\u51b3\u95ee\u9898\u7684\u5173\u952e\u6280\u672f\u70b9\u4e0e\u621111\u5e74\u5173\u4e8e<code>pointer-events<\/code><a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=2091\">\u90a3\u7bc7\u6587\u7ae0<\/a>\u7ed9\u51fa\u7684\u517c\u5bb9\u89e3\u51b3\u65b9\u6848\u7684\u6280\u672f\u70b9\u4e00\u81f4\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/87f342f704ad769a5e6bd0d60829118e?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Chip<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 26, 2013 at 11:38 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Really nice \u2013 solves a specific issue we we\u2019re having with hover events firing off while scrolling! The only issue I\u2019m still seeing is the recalcute style (purple) event jumping to 30 fps each time the class is added to the body. I didn\u2019t see the same thing in your video so I\u2019m wondering if I\u2019m doing something wrong.<\/p>\n<p>https:\/\/www.dropbox.com\/s\/jant444jwgo2jep\/recalculate%20jump.png<\/p><\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/87f342f704ad769a5e6bd0d60829118e?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Chip<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-26 11:38<\/small><\/time><\/p>\n<div class=\"bq_content\">\u771f\u7684\u5f88\u8d5e\uff01\u89e3\u51b3\u4e86\u6211\u4eec\u6eda\u52a8\u65f6\u5019\u89e6\u53d1hover\u4e8b\u4ef6\u8fd9\u4e2a\u95ee\u9898\u3002\u73b0\u5728\u6211\u4ecd\u4e0d\u89e3\u7684\u552f\u4e00\u95ee\u9898\u5c31\u662f\uff0c\u6bcf\u6b21\u5f80<code>body<\/code>\u6dfb\u52a0\u7c7b\u540d\u7684\u65f6\u5019\uff0c\u8ba1\u7b97\u6837\u5f0f(\u7c89\u8272\u90a3\u4e2a)\u4e8b\u4ef6\u7acb\u9a6c\u8df3\u523030\u5e27\u9891\u3002\u4f46\u662f\uff0c\u6211\u5728\u4f60\u7684\u89c6\u9891\u4e0a\u6ca1\u6709\u770b\u5230\u540c\u6837\u7684\u73b0\u8c61\u3002\u6211\u5728\u60f3\u662f\u4e0d\u662f\u6211\u54ea\u91cc\u505a\u9519\u4e86\u3002\u4e00\u5f20\u9700\u8981\u722c\u5899\u540c\u65f6\u53ef\u80fd\u88ab\u5220\u9664\u7684\u56fe\u7247\u5730\u5740\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u54c8\uff0c\u8fd9\u4e00\u90e8\u5206\u5bf9\u8bdd\u5f88\u7cbe\u5f69\u7684\uff0c\u6ce8\u610f\u4e0b\u9762\u4f5c\u8005\u7684\u56de\u590d~<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/8677c9f7c0f6d947bf318c1430d00bfd?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ryan Seddon<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 26, 2013 at 12:53 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">@Chip \u2013 Yep @derSchepp has said to set document.body.style directly rather than adding\/removing a class to avoid a reflow. I\u2019ll update the article real soon.Also I\u2019d say it\u2019s way less noticable in my video as my DOM structure is a lot simpler than your app you\u2019re trying this in.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/8677c9f7c0f6d947bf318c1430d00bfd?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ryan Seddon<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-26 12:53<\/small><\/time><\/p>\n<div class=\"bq_content\">@Chip &#8211; \u55ef\u54ea\uff0c\u6839\u636e@derSchepp\u7684\u8bf4\u6cd5\uff0c\u76f4\u63a5\u5728<code>document.body.style<\/code>\u4e0a\u8bbe\u7f6e\u76f8\u6bd4\u6dfb\u52a0\/\u5220\u9664\u7c7b\u540d\u53ef\u4ee5\u907f\u514d\u56de\u6d41\u3002\u6211\u5f85\u4f1a\u5c31\u66f4\u65b0\u4e0b\u6587\u7ae0\u3002<br \/>\u53e6\u5916\uff0c\u60a8\u53ef\u80fd\u6ca1\u6ce8\u610f\u5230\uff0c\u6211\u89c6\u9891\u4e2dDOM\u7ed3\u6784\u8981\u6bd4\u4f60\u5c1d\u8bd5\u7684app\u8981\u7b80\u5355\u591a\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u7ee7\u7eed\u7cbe\u5f69\u7684\u5bf9\u8bdd~<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/87f342f704ad769a5e6bd0d60829118e?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Chip<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 26, 2013 at 2:20 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">I tested Malte\u2019s idea of adding \/ removing a cover div and that is working the best for me. Changing the document.body.style still causing a 30fps recalculate, but simply adding \/ removing a cover div with the following css worked perfect and keeps us at 60fps:<\/p>\n<div class=\"zxx_code\">\n<pre>.scroll-cover {\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  position: fixed;\n  pointer-events: auto !important;\n  z-index: 10000;\n}<\/pre>\n<\/div>\n<div class=\"zxx_code\">\n<pre>var body = document.body,\n    cover = document.createElement('div');\n    cover.setAttribute('class','scroll-cover');\n\nwindow.addEventListener('scroll', function() {\n  clearTimeout(timer);\n  body.appendChild(cover);\n  \n  timer = setTimeout(function(){\n    body.removeChild(cover);\n  },500);\n}, false);<\/pre>\n<\/div>\n<p>I was able to change the setTimeout to 100 to make clicks more responsive and still keep perf<\/p>\n<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/87f342f704ad769a5e6bd0d60829118e?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Chip<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-26 14:20<\/small><\/time><\/p>\n<div class=\"bq_content\">\u6211\u8bd5\u9a8c\u4e86Malte\u5173\u4e8e\u201c\u6dfb\u52a0\/\u79fb\u9664\u4e00\u4e2a\u8986\u76d6div\u201d\u7684\u60f3\u6cd5\uff0c\u8c8c\u4f3c\u6548\u679c\u6700\u597d\u3002\u6539\u53d8<code>document.body.style<\/code>\u4f9d\u65e7\u4f1a\u5bfc\u81f430fps\u7684\u91cd\u8ba1\u7b97\uff0c\u4f46\u662f\u5f88\u5355\u7eaf\u5730\u201c\u6dfb\u52a0\/\u79fb\u9664\u4e00\u4e2a\u8986\u76d6div\u201d\u540c\u65f6\u4f7f\u7528\u4e0b\u9762\u7684CSS\u6548\u679c\u5b8c\u7f8e\uff0c\u4f9d\u7136\u4fdd\u630160fps.<\/p>\n<p><span class=\"g\">\u4ee3\u7801\u7565&#8230;<\/span><\/p>\n<p>\u6211\u628a<code>setTimeout<\/code>\u65f6\u95f4\u6539\u6210<code>100<\/code>\u6beb\u79d2\u4f9d\u7136\u6548\u679c\u5f88\u8d5e\u54e6\u3002<\/p>\n<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u662f\u4e0d\u662f\u53c8\u65b0\u6280\u80fdget\u5566\uff01\u5230\u5e95\u662f\u65b0\u6280\u80fd\u8fd8\u662f\u65b0\u9e21\u808b\uff1f\u9762\u5bf9\u8fd9\u4e2a\u7591\u95ee\u6211\u4eec\u8be5\u600e\u4e48\u529e\uff1f\u5f88\u7b80\u5355\uff0c\u6309\u7167\u4e0a\u9762\u7684\u771f\u7406\u6b65\u9aa4\uff0c1. \u6000\u7591\uff1b 2.\u81ea\u5df1\u8bd5\u9a8c\u3002\u8fd9\u4e2a\u540e\u9762\u6211\u4eec\u4e00\u8d77\u5b9e\u8df5\u4e00\u756a\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/5ae810b787d557a8098383c8209b45d1?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Matt Stuehler<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 26, 2013 at 3:17 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">How does this apply to mobile devices (iOS in particular)? Is it at all relevant?<\/p>\n<p>And if it is\u2026 what are the implications of using -webkit-overflow-scrolling: touch? That seems to complicate the issue of knowing when the scroll event begins and ends\u2026<\/p><\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/5ae810b787d557a8098383c8209b45d1?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Matt Stuehler<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-26 15:17<\/small><\/time><\/p>\n<div class=\"bq_content\">\u8fd9\u4e2a\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u548b\u6574\u554a\uff08\u5c24\u5176iOS\u8bbe\u5907\uff09\uff1f\u8fd9\u4e2a\u662f\u4e00\u65b9\u901a\u884c\u7684\u5417\uff1f<\/p>\n<p>\u5982\u679c\u2026\u2026\u4f7f\u7528\u4e86<code>-webkit-overflow-scrolling: touch<\/code>\u53c8\u8be5\u5982\u4f55\u5b9e\u73b0\uff1f\u4f3c\u4e4e\u5f53\u6eda\u52a8\u4e8b\u4ef6\u5f00\u59cb\u4e8e\u7ed3\u675f\u7684\u65f6\u5019\uff0c\u95ee\u9898\u53d8\u5f97\u66f4\u590d\u6742\u4e86\u2026\u2026<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: iOS\u7b49\u79fb\u52a8\u8bbe\u5907\u4e0a\u526f\u4f5c\u7528\u5f00\u59cb\u6709\u4eba\u63d0\u51fa\u2026\u2026<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/1aff84e90980d07976befe48bdc82493?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Peter<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 27, 2013 at 5:58 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">This looks great! However there\u2019s one thing I don\u2019t understand \u2013 you disable pointer events and immediately after show that the hover states still work, before scrolling down the page at 60fps. How did the hover states still work? Were you enabling the JS version not just applying the CSS class? Thanks!<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/1aff84e90980d07976befe48bdc82493?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Peter<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-27 17:58<\/small><\/time><\/p>\n<div class=\"bq_content\">\u770b\u4e0a\u53bb\u5f88\u4e0d\u9519\uff01\u4f46\u6211\u6709\u4e00\u4e8b\u4e0d\u660e\u2014\u2014\u4f60\u7981\u7528\u4e86<code>pointer events<\/code>\u4f46<code>hover<\/code>\u72b6\u6001\u5728\u6eda\u52a8\u7ed3\u675f\u540e\u53c8\u7acb\u5373\u663e\u793a\u51fa\u6765\u4e86\u3002\u600e\u4e48\u529e\u5230\u7684\uff1f\u4f60\u662f\u4e0d\u662fJS\u91cc\u9762\u6363\u817e\u4e86\u846b\u82a6\u836f\u800c\u4e0d\u4ec5\u4ec5\u662f\u5e94\u7528CSS\u7c7b\u540d\u554a\uff1f\u591a\u8c22\uff01<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u6ca1\u597d\u597d\u770b\u6587\u7ae0\u7684\u5c0f\u767d\u6765\u95ee\u95ee\u9898\u4e86\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/d6edf91cf5906e1b51a1bf93a62b6a36?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>sam<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 28, 2013 at 5:36 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Blown away. This is simply brilliant.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/d6edf91cf5906e1b51a1bf93a62b6a36?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>sam<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-28 5:36<\/small><\/time><\/p>\n<div class=\"bq_content\">\u8d70\u8d77\u3002\u7b80\u76f4\u8d85\u795e\u4e86\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u9a6c\u5c41\u515a\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/f7a8402f462f0fe1f37eace561de50e7?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Aurelien Foutoyet<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 28, 2013 at 8:33 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Really clever sir.<br \/>Thanks for sharing !<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/f7a8402f462f0fe1f37eace561de50e7?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Aurelien Foutoyet<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-28 8:33<\/small><\/time><\/p>\n<div class=\"bq_content\">\u592a\u806a\u660e\u4e86\u3002<br \/>\u591a\u8c22\u5206\u4eab\uff01<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u9a6c\u5c41\u515a, again!<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/8677c9f7c0f6d947bf318c1430d00bfd?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ryan Seddon <\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 28, 2013 at 9:07 am<\/small><\/time><\/p>\n<div class=\"bq_content\">@Peter \u2013<\/p>\n<p>The hover effects are only disabled once you start to scroll so it won\u2019t interfere with hover until then, so that\u2019s why hover still works in the video after I click the disable button.<\/p><\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/8677c9f7c0f6d947bf318c1430d00bfd?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ryan Seddon <\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2012-11-28 9:07<\/small><\/time><\/p>\n<div class=\"bq_content\">@Peter \u2013<\/p>\n<p><code>hover<\/code>\u6548\u679c\u53ea\u5728\u5f00\u59cb\u6eda\u52a8\u7684\u65f6\u5019\u7981\u7528\uff0c\u6240\u4ee5\u6b64\u65f6\u6ca1\u6709<code>hover<\/code>\u76f8\u5173\u4ea4\u4e92\uff0c\u76f4\u5230\u6eda\u52a8\u505c\u6b62\u3002\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48\u89c6\u9891\u4e2d\u6211\u70b9\u51fb\u4e86\u7981\u7528\u6309\u94ae\uff0c<code>hover<\/code>\u6548\u679c\u4ecd\u7136\u6709\u6548\u7684\u539f\u56e0\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u5c0f\u767d\u8f85\u5bfc\u4e2d\u2026\u2026<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/8677c9f7c0f6d947bf318c1430d00bfd?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ryan Seddon<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 28, 2013 at 9:14 am<\/small><\/time><\/p>\n<div class=\"bq_content\">@Matt \u2013 Hover on scroll isn\u2019t really relevant to non mouse based devices as you can\u2019t really trigger a hover. You should really avoid the use of :hover on touch based devices all together as it causes issues.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/8677c9f7c0f6d947bf318c1430d00bfd?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ryan Seddon<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-28 9:14<\/small><\/time><\/p>\n<div class=\"bq_content\">@Matt \u2013 \u5bf9\u4e8e\u65e0\u9f20\u6807\u8bbe\u5907\u800c\u8a00\uff0cscroll\u4e0a\u9762\u7684hover\u5b9e\u9645\u6ca1\u6709\u5173\u8054\u7684\u3002\u56e0\u4e3a\u4f60\u6ca1\u6cd5\u771f\u6b63\u89e6\u53d1<code>hover<\/code>. \u5982\u679c\u8fd9\u5bfc\u81f4\u4e86\u67d0\u4e9b\u95ee\u9898\uff0c\u4f60\u5e94\u8be5\u8bd5\u7740\u907f\u514d\u5728\u89e6\u6478\u5f0f\u8bbe\u5907\u4e0a\u4f7f\u7528<code>:hover<\/code>.<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u6709\u63a8\u8131\u4e4b\u5acc\u2026\u2026<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/1451dfb2aed25870dfdaf638588adc92?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Sam Jarvis<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 28, 2013 at 7:21 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">Amazing.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/1451dfb2aed25870dfdaf638588adc92?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Sam Jarvis<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-28 19:21<\/small><\/time><\/p>\n<div class=\"bq_content\">\u9707\u7cbe\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u9a6c\u5c41\u515a\uff0cagain&#8217;s again.<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/b689f4b63a117a0b24a8b4d65193fba7?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Manumanu<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 28, 2013 at 10:42 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">Great idea. Just wanted to say : IE11 naturally disable pointer events when scrolling. Dunno since which version, \u2019cause i wasn\u2019t aware of this issue.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/b689f4b63a117a0b24a8b4d65193fba7?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Manumanu<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-28 22:42<\/small><\/time><\/p>\n<div class=\"bq_content\">\u60f3\u6cd5\u4e0d\u9519\u3002\u6211\u53ea\u60f3\u8bf4\uff1aIE11\u5728\u6eda\u52a8\u7684\u65f6\u5019\u5929\u7136\u7981\u7528<code>pointer events<\/code>. \u4f46\u4e0d\u77e5\u9053\u4ece\u54ea\u4e2a\u7248\u672c\u5f00\u59cb\uff0c\u56e0\u6b64\u8fd9\u91cc\u7684\u63a2\u8ba8\u7684\u95ee\u9898\u6211\u4e00\u70b9\u4e5f\u4e0d\u5728\u610f\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u54df\uff0c\u6ce8\u610f\u5566\uff01\u95ee\u9898\u6765\u4e86\uff01\u524d\u9762\u6709\u6d4b\u8bd5\u8bf4IE11\u4e0b\u7ed3\u679c\u8ddfChrome\u662f\u4e00\u6837\u7684\uff0c\u8fd9\u4f4d\u5144\u5f1f\u8bf4IE11\u5929\u7136\u6eda\u52a8\u7981\u7528\u9f20\u6807\u4e8b\u4ef6\u3002\u5b70\u5bf9\u5b70\u9519\uff1f\u8fd8\u5f97\u81ea\u5df1\u6d4b\u8bd5~~<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/ebcf2021019334e419a2d06c415df05f?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ben Knight<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 29, 2013 at 2:57 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">Great minds think alike!<\/p>\n<p><a href=\"https:\/\/twitter.com\/benjamin_knight\/status\/401829093055791104\" style=\"font-size:12px;\">https:\/\/twitter.com\/benjamin_knight\/status\/401829093055791104<\/a><\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/ebcf2021019334e419a2d06c415df05f?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ben Knight<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-29 14:57<\/small><\/time><\/p>\n<div class=\"bq_content\">\u82f1\u96c4\u6240\u89c1\u7565\u540c\uff01<\/p>\n<p><a href=\"https:\/\/twitter.com\/benjamin_knight\/status\/401829093055791104\" style=\"font-size:12px;\">https:\/\/twitter.com\/benjamin_knight\/status\/401829093055791104<\/a><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u6709\u60f3\u6cd5\u8981\u901a\u8fc7\u66f4\u597d\u7684\u6e20\u9053\u5448\u73b0\u544a\u77e5\u3002\u5426\u5219\uff0c\u4f60\u5c31\u4e0d\u662f\u9996\u521b\u8005\u3002\u8fd9\u4f4d\u5144\u5f1ftwitter\u53d1\u5e03\u4e8e17\u53f7\uff0c\u89c1\u4e0b\u56fe\uff1a<br \/><img decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-03_183739.png\" class=\"mt5\" height=\"336\"><\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/24e08a9ea84deb17ae121074d0f17125?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Mathias Bynens<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 29, 2013 at 6:09 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">Instead of <code>document.body<\/code>, consider applying this to the root element (<code>document.documentElement<\/code>). That way, it will still work if you use <code>&lt;html&gt;<\/code> and <code>&lt;body&gt;<\/code> as a free <code>&lt;div&gt;<\/code> \u2014 e.g. if you apply <code>margin: 0 auto;<\/code> <code>max-width: 30em;<\/code> <code>box-shadow: \u2026;<\/code> to <code>&lt;body&gt;<\/code>.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/24e08a9ea84deb17ae121074d0f17125?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Mathias Bynens<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-29 18:09<\/small><\/time><\/p>\n<div class=\"bq_content\">\u53ef\u4e0d\u53ef\u4ee5\u5e94\u7528\u5728\u6839\u5143\u7d20\u4e0a(<code>document.documentElement<\/code>)\uff0c\u800c\u4e0d\u662f<code>document.body<\/code>. \u8fd9\u6837\uff0c\u5373\u4f7f\u4f60\u628a<code>&lt;html&gt;<\/code>\u548c<code>&lt;body&gt;<\/code>\u4f5c\u4e3a\u666e\u901a\u7684<code>&lt;div&gt;<\/code>\u4f7f\u5524\u4e5f\u662f\u53ef\u4ee5\u7684\u3002\u2014\u2014\u4f8b\u5982\uff0c\u5e94\u7528<code>margin: 0 auto;<\/code> <code>max-width: 30em;<\/code> <code>box-shadow: \u2026;<\/code>\u5230<code>&lt;body&gt;<\/code>\u4e0a\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u770b\u4e0a\u53bb\u53c8\u662f\u4e00\u4e2a\u4e0d\u9519\u7684\u5efa\u8bae\u3002\u662f\u5426OK\uff0c\u8fd8\u9700\u8981\u6211\u4eec\u7684\u4eb2\u81ea\u6d4b\u8bd5\uff0c\u800c\u4e0d\u662f\u522b\u4eba\u8bf4\u4ec0\u4e48\u5c31\u4fe1\u4ec0\u4e48\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/ceebaf3266c06aa51ee7406530790ea3?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>newable<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 30, 2013 at 12:31 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Great!<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/ceebaf3266c06aa51ee7406530790ea3?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>newable<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-30 0:31<\/small><\/time><\/p>\n<div class=\"bq_content\">\u8d5e\uff01<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u53c8\u89c1\u9a6c\u5c41\u515a\uff01<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/7b36d520356abbfa4406f0e9be4aea5b?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Richard Ayotte<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 30, 2013 at 1:30 am<\/small><\/time><\/p>\n<div class=\"bq_content\">It would be nice if this behaviour was the default in browsers.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/7b36d520356abbfa4406f0e9be4aea5b?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Richard Ayotte<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-30 1:30<\/small><\/time><\/p>\n<div class=\"bq_content\">\u5982\u679c\u6d4f\u89c8\u5668\u7684\u9ed8\u8ba4\u884c\u4e3a\u5c31\u662f\u8fd9\u6837\u90a3\u5c31\u5e05\u6c14\u4e86\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u6211\u8bf4\u5144\u5f1f\uff0c\u4f60\u4f55\u6765\u7ed3\u8bba\u8ba4\u4e3a\u6d4f\u89c8\u5668\u7684\u9ed8\u8ba4\u884c\u4e3a\u4e0d\u662f\u5982\u6b64\uff1f<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/a1c5c36dfde41ff8c4a92c94180b2dbf?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Thierry Koblentz<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 30, 2013 at 3:26 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Hey Ryan,<br \/>In my opinion, this is something browsers should be smart enough to do themselves. So it would make sense to me if one already did; IE11 may be? As @Manumanu suggests.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/a1c5c36dfde41ff8c4a92c94180b2dbf?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Thierry Koblentz<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-30 3:26<\/small><\/time><\/p>\n<div class=\"bq_content\">\u90a3\u4e2a\uff0cRyan, <br \/>\u5728\u6211\u770b\u6765\uff0c\u8fd9\u79cd\u4e8b\u60c5\u5e94\u8be5\u8ba9\u6d4f\u89c8\u5668\u81ea\u5df1\u89e3\u51b3\u3002\u5982\u679c\u6709\u90a3\u4e2a\u6d4f\u89c8\u5668\u5df2\u7ecf\u505a\u4e86\u8fd9\u4ef6\u4e8b\uff0c\u5bf9\u6211\u800c\u8a00\u662f\u6781\u597d\u7684\uff1b\u53ef\u80fdIE11? \u6b63\u5982@Manumanu\u63d0\u5230\u7684\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u597d\u5427\uff0c\u5176\u5b9e\u6211\u4e5f\u662f\u8fd9\u4e2a\u89c2\u70b9\u3002\u540e\u9762\u7684\u4e00\u4e9b\u5b9e\u9a8c\u6570\u636e\u548c\u73b0\u8c61\u4f1a\u8bf4\u660e\uff0c\u6d4f\u89c8\u5668\u4e0d\u662f\u50bb\u5b50\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/31ac67bd1b7db15ead8e823298bee621?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>JosiahS<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 30, 2013 at 5:59 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Interesting idea, but it seems to have the side effect of disabling multi-touch page scrolling on Chrome in Windows 8. (I haven\u2019t tested it anywhere else.)<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/31ac67bd1b7db15ead8e823298bee621?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>JosiahS<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-30 5:59<\/small><\/time><\/p>\n<div class=\"bq_content\">\u5f88\u6709\u610f\u601d\u7684\u60f3\u6cd5\uff0c\u4f46\u662f\u8c8c\u4f3c\u5728Windows 8\u7684Chrome\u6d4f\u89c8\u5668\u4e2d\u6709\u526f\u4f5c\u7528\uff0c\u9875\u9762\u7684\u89e6\u5c4f\u6eda\u52a8\u88ab\u7981\u7528\u6389\u4e86\uff08\u6211\u8fd8\u6ca1\u6709\u6d4b\u8bd5\u5176\u4ed6\u4efb\u4f55\u5730\u65b9\uff09\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u54e6\u54e6\u54e6\uff0c\u51fa\u5927\u7bd3\u5b50\u4e86\uff0c\u5982\u679c\u8fd9\u4e2a\u5c5e\u5b9e\uff0c\u6b64\u65b9\u6cd5\u53c8\u4e2d\u4e86\u4e00\u5200\u81f4\u547d\u4f24\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/faac8c638b56cef23f147dbf9e20a2e1?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ron<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 30, 2013 at 7:54 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Any reason why this shouldn\u2019t just be built into Chrome?<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/faac8c638b56cef23f147dbf9e20a2e1?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Ron<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-30 7:54<\/small><\/time><\/p>\n<div class=\"bq_content\">\u6709\u4ec0\u4e48\u7406\u7531\u8fd9\u4e0d\u5e94\u8be5\u88ab\u5185\u7f6e\u5230Chrome\u6d4f\u89c8\u5668\uff1f<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u6211\u53ea\u60f3\u8bf4\uff0c\u6211\u4eec\u6df1\u53d7\u559c\u7231\u7684Chrome\u6d4f\u89c8\u5668\u4e0d\u662f\u50bb\u5b50\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/84d176d4cd316a73daf40a51dca7c5be?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>RS<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>November 30, 2013 at 9:28 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Echoing poster above, yes brilliant indeed. I\u2019ve got to say, one thing I personally find just annoying is hover effects on images\u2013you know like those with an overlay and some icon\u2013something, anything\u2013showing that it\u2019s a video post, or image post or whatever. But alas, every client wants this garbg! And of course when you\u2019re scrolling down the page, and mouse pointer hits the images\/elements then it can be a very unsatisfactory experience.<\/p>\n<p>Thanks for the post!<\/p><\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/84d176d4cd316a73daf40a51dca7c5be?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>RS<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-11-30 9:28<\/small><\/time><\/p>\n<div class=\"bq_content\">\u6211\u5f88\u8d5e\u540c\u4e0a\u9762\u7684\u6587\u827a\uff0c\u786e\u5b9e\u5f88\u8d5e\u3002\u6211\u4e0d\u5f97\u4e0d\u8bf4\uff0c\u5173\u4e8e<code>hover<\/code>\u6548\u679c\uff0c\u6211\u4e00\u76f4\u6709\u4ef6\u4e8b\u60c5\u803f\u803f\u4e8e\u6000\uff0c\u90a3\u5c31\u662f\u56fe\u7247\u7684<code>hover<\/code>\u6548\u679c\uff0c\u4f60\u61c2\u7684\uff0c\u7ecf\u5e38\u4f1a\u51fa\u73b0\u4e00\u4e2a\u8986\u76d6\u5c42\uff0c\u4e0a\u9762\u6709\u56fe\u6807\u4ee5\u53ca\u5176\u4ed6\u4ec0\u4e48\u4e1c\u897f\uff0c\u544a\u8bc9\u4f60\u8fd9\u662f\u4e2a\u542b\u89c6\u9891\u7684\u6587\u7ae0\uff0c\u6216\u8005\u542b\u56fe\u7247\u7684\u6587\u7ae0\u7b49\u3002\u4f46\u662f\u4e0d\u5e78\u7684\u662f\u6bcf\u4e2a\u5ba2\u6237\u7aef\u90fd\u4f1a\u89e6\u53d1\u4e4b\uff0c\u8bd5\u60f3\u4e0b\uff0c\u5f53\u4f60\u5411\u4e0b\u6eda\u52a8\u9875\u9762\u7684\u65f6\u5019\uff0c\u9f20\u6807\u89e6\u78b0\u4e86\u8fd9\u4e9b\u56fe\u7247\u6216\u5143\u7d20\uff0c\u4f1a\u662f\u4e00\u4e2a\u4e0d\u597d\u7684\u4f53\u9a8c\u3002<\/p>\n<p>\u611f\u8c22\u8fd9\u7bc7\u6587\u7ae0\uff01<\/p><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u600e\u4e48\u611f\u89c9\u662f\u4e2a\u8111\u6b8b\u7c89\uff0c\u6216\u8005\u4e13\u95e8\u8c03\u505c\u7684\u8001\u597d\u4eba\u3002\u5144\u5f1f\uff0c\u4f60\u8bf4\u7684\u90a3\u51fa\u620f\u4e0d\u662f\u6211\u4eec\u8fd9\u573a\uff0c\u597d\u5427\u3002\u4f60\u5acc\u5f03\u9f20\u6807<code>hover<\/code>\u6643\u778e\u81ea\u5df1\u7684\u7814\u7a76\uff0c\u4f7f\u7528\u9f20\u6807<code>hover<\/code>\u5ef6\u8fdf\u6280\u672f\u554a\uff0c\u4e0e\u8fd9\u91cc\u63d0\u9ad8\u7ed8\u5236\u5448\u73b0\u6027\u80fd\u4e0d\u642d\u5676\u7684\uff0c\u597d\u5427\u3002\u54ea\u8fb9\u51c9\u5feb\u54ea\u8fb9\u5f85\u53bb~\u6c42\u4f60\u4e86\uff0c\u4f60\u90a3\u51cc\u4e71\u4e0d\u901a\u7684\u8bed\u53e5\u8ba9\u6211\u5f88\u8f9b\u82e6\u7684~<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/dbff37a6b512543e425080493cf208ed?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Jake<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>December 1, 2013 at 7:55 am<\/small><\/time><\/p>\n<div class=\"bq_content\">I tried this a while ago on a project and it does trigger a layout when pointer-events: none; is applied to the body (It does in your demo as well). I came up with a different solution but it was more complicated. It basically involves moving a 100x100px fixed position div under the mouse using translate3d() while scrolling, then moving it back out of the window when scrolling is done. That stops the hover effects and doesn\u2019t trigger a layout. This was on a really complicated page, so that forced layout was more of an issue.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/dbff37a6b512543e425080493cf208ed?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Jake<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-12-1 7:55<\/small><\/time><\/p>\n<div class=\"bq_content\">\u4e0d\u4e45\u524d\u5728\u4e00\u4e2a\u9879\u76ee\u4e2d\u6211\u5c1d\u8bd5\u4e86\u8fd9\u4e2a\uff0c\u5f53<code>pointer-events: none;<\/code>\u5e94\u7528\u5728<code>body<\/code>\u4e0a\u7684\u65f6\u5019\uff08\u6b63\u5982demo\u505a\u7684\u90a3\u6837\uff09\u89e6\u53d1\u4e86\u5e03\u5c40\u3002\u6211\u5c31\u60f3\u4e86\u4e00\u4e2a\u4e0d\u540c\u7684\u89e3\u51b3\u65b9\u6cd5\uff0c\u4f46\u662f\u8981\u66f4\u590d\u6742\u4e9b\u3002\u6211\u521b\u5efa\u4e86\u4e00\u4e2a<code>100x100px<\/code> <code>fixed<\/code>\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u901a\u8fc7<code>translate3d()<\/code>\u8ba9\u5176\u5728\u6eda\u52a8\u7684\u65f6\u5019\u79fb\u52a8\u5728\u9f20\u6807\u7684\u5c0f\u9762\uff0c\u5f53\u6eda\u52a8\u505c\u6b62\u7684\u65f6\u5019\u518d\u79fb\u52a8\u5230\u7a97\u4f53\u5916\u9762\u3002\u8fd9\u4e0b\u5b50\u963b\u6b62\u4e86<code>hover<\/code>\u6548\u679c\u540c\u65f6\u4e0d\u89e6\u53d1\u5e03\u5c40\u3002\u56e0\u4e3a\u8fd9\u662f\u4e00\u4e2a\u975e\u5e38\u590d\u6742\u7684\u9875\u9762\uff0c\u56e0\u6b64\u89e6\u53d1\u5e03\u5c40(layout)\u662f\u4e2a\u6bd4\u8f83\u4e25\u91cd\u7684\u95ee\u9898\u3002<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u590d\u6742\u9875\u9762\u7684\u91cd\u5e03\u5c40\u786e\u5b9e\u53ef\u80fd\u4f1a\u6709\u660e\u663e\u7684\u6027\u80fd\u635f\u8017\u3002\u4f46\u662f\uff0c\u8fd9\u4f4d\u540c\u5b66\u7684\u505a\u6cd5\uff0c\u6211\u4e2a\u4eba\u89c9\u5f97\u662f\u4e0d\u662f\u5e94\u8be5\u6cbb\u672c\u800c\u4e0d\u662f\u6cbb\u6807\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/34fb0f7ad4f2d049e0f25fa5b3349593?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Greg<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>December 2, 2013 at 8:18 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Thank you!!!<\/p>\n<p>I used this technique to solve a different problem which should also be worth mentioning.<\/p>\n<p>On my site I am using the Google Maps API and when I scroll down the page (using the scroll-wheel) the page suddenly stops once my mouse hovers over the map. The scroll-wheel would then start to re-scale the map which was annoying, I could disable the scroll wheel in the API but that would disable it permanently.<\/p>\n<p>Using this method the user can now scroll past the map using the scroll wheel AND re-scale the map if they so desire using the scroll wheel. Two worlds in harmony \ud83d\ude42<\/p><\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/34fb0f7ad4f2d049e0f25fa5b3349593?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Greg<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-12-2 8:18<\/small><\/time><\/p>\n<div class=\"bq_content\">\u591a\u8c22\uff01\uff01\uff01<\/p>\n<p>\u6211\u4f7f\u7528\u8fd9\u4e2a\u6280\u672f\u89e3\u51b3\u4e86\u53e6\u5916\u4e00\u4e2a\u95ee\u9898\uff0c\u6211\u89c9\u5f97\u503c\u5f97\u4e00\u63d0\u3002<\/p>\n<p>\u6211\u7684\u7ad9\u70b9\u4e0a\u4f7f\u7528\u4e86Google\u5730\u56feAPI\u5f53\u6211\u4f7f\u7528\u6eda\u8f6e\u6eda\u52a8\u9875\u9762\u7684\u65f6\u5019\uff0c\u5f53\u6211\u9f20\u6807\u7ecf\u8fc7\u8fd9\u4e2a\u5730\u56fe\u7684\u65f6\u5019\uff0c\u6eda\u52a8\u5c31\u4f1a\u505c\u6b62\uff0c\u53d8\u6210\u5730\u56fe\u5927\u5c0f\u7684\u7f29\u653e\u4e86\u3002\u6211\u53ef\u4ee5\u5229\u7528API\u7981\u6b62\u5730\u56fe\u7684\u6eda\u8f6e\u7f29\u653e\uff0c\u4f46\u662f\u8fd9\u79cd\u7981\u7528\u662f\u6c38\u4e45\u7684\u3002<\/p>\n<p>\u4f7f\u7528\u8fd9\u4e2a\u65b9\u6cd5\u7528\u6237\u5c31\u80fd\u591f\u81ea\u5982\u5730\u4ece\u5730\u56fe\u4e0a\u9762\u6eda\u8fc7\u53bb\uff0c\u540c\u65f6\u4e0d\u5f71\u54cd\u5730\u56fe\u7684\u7f29\u653e\u3002\u4e24\u4e2a\u4e16\u754c\u90fd\u548c\u8c10\u4e86 \ud83d\ude42<\/p><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u8fd9\u5012\u662f\u4e00\u4e2a\u4e0d\u9519\u7684\u5e94\u7528\u573a\u666f\u3002\u53ea\u662f\u6211\u7591\u60d1\u7684\u662f\uff0c\u96be\u9053\u8fd9\u4f4d\u5144\u5f1f\u4e0d\u8981\u5173\u5fc3IE9, IE10\u6d4f\u89c8\u5668\u5417\uff1f\u5b9e\u9645\u4e0a\uff0c\u4f60\u4f7f\u7528\u4e00\u4e2a\u5c0f\u5c0f<code>div<\/code>\u8986\u76d6\u5728\u5730\u56fe\u4e0a\uff0c\u4e5f\u53ef\u4ee5\u5230\u8fbe\u4e00\u6837\u7684\u6548\u679c\u3002\u4e14\u517c\u5bb9\u6027\u66f4\u597d\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/90f20dbc758600eb2e3bb49554757870?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>d43m<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>December 3, 2013 at 7:11 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">Looks like it doesn\u2019t change anything with firefox, at least on the demo site, the hover effect doesn\u2019t trigger either way while scrolling.<\/p>\n<p>However, good tip for scrolling on the map Greg !<\/p><\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/90f20dbc758600eb2e3bb49554757870?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>d43m<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-12-03 19:11<\/small><\/time><\/p>\n<div class=\"bq_content\">\u4f3c\u4e4efirefox\u4e0b\u6ca1\u6709\u4efb\u4f55\u6539\u53d8\uff0c\u81f3\u5c11\u672c\u6587\u7684demo\u9875\u9762\u5982\u6b64\uff0c\u6eda\u52a8\u65f6\u5019\u4e0d\u4f1a\u89e6\u53d1\u4efb\u4f55hover\u6548\u679c\u3002<\/p>\n<p>\u4e0d\u8fc7\uff0cGreg\u7684\u90a3\u4e2a\u5730\u56fe\u5904\u7406\u6280\u5de7\u5f88\u8d5e\uff01<\/p><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u5927\u5bb6\u53ef\u4ee5\u81ea\u5df1\u5728FireFox\u6d4f\u89c8\u5668\u4e0b\u6d4b\u8bd5\u4e0b\uff0c\u6eda\u52a8\u7684\u65f6\u5019\u662f\u4e0d\u4f1a\u6709hover\u6548\u679c\u89e6\u53d1\u7684\uff0c\u505c\u4e0b\u6765\u624d\u4f1a\u6709\uff0c\u4e5f\u5c31\u662f\u4ece\u8089\u773c\u6240\u89c1\u6765\u770b\uff0c\u4f3c\u4e4eFireFox\u5929\u7136\u5bf9\u6eda\u52a8\u4e0e<code>hover<\/code>\u5448\u73b0\u505a\u4e86\u4f18\u5316\u5904\u7406\u3002<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/44391f94143d129bdfdcd8b52aa51674?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Schalk Neethling<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>December 3, 2013 at 11:02 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">Thanks for this awesome article! Here is how I ended up implementing it and it works great ~ <a href=\"https:\/\/gist.github.com\/ossreleasefeed\/7768761\">https:\/\/gist.github.com\/ossreleasefeed\/7768761<\/a><\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/44391f94143d129bdfdcd8b52aa51674?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Schalk Neethling<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-12-03 23:02<\/small><\/time><\/p>\n<div class=\"bq_content\">\u591a\u8c22\u5206\u4eab\u5982\u6b64\u7cbe\u5f69\u7684\u6587\u7ae0\u3002\u8fd9\u91cc\u662f\u6211\u7684\u5b9e\u73b0\uff0c\u6548\u679c\u5f88\u8d5e~ <a href=\"https:\/\/gist.github.com\/ossreleasefeed\/7768761\">https:\/\/gist.github.com\/ossreleasefeed\/7768761<\/a><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<div class=\"bq_author\"><span class=\"bq_valign\">\/\/zxx: \u8fd9\u5c31\u662f\u4e0a\u9762\u4e00\u4f4d\u5144\u5f1f\u63d0\u7684<code>pointer-events:none<\/code>\u5e94\u7528\u5728<code>document.documentElement<\/code>\u4e0a\u3002<\/span><\/div>\n<div class=\"zxx_code\">\n<pre><span style=\"color:green;\">\/**\n * Disable and enable event on scroll begin and scroll end.\n * @see http:\/\/www.thecssninja.com\/javascript\/pointer-events-60fps\n *\/<\/span>\nvar root = document.documentElement;\nvar timer;\n\nwindow.addEventListener('scroll', function() {\n    <span style=\"color:green;\">\/\/ \u7528\u6237\u6eda\u52a8\u505c\u6b62timeout<\/span>\n    clearTimeout(timer);\n    <span style=\"color:green;\">\/\/ Pointer events \u5df2\u88ab\u7981\u7528<\/span>\n    if (!root.style.pointerEvents) {\n        root.style.pointerEvents = 'none';\n    }\n\n    timer = setTimeout(function() {\n        root.style.pointerEvents = '';\n    }, 500);\n}, false);<\/pre>\n<\/div>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/52e1fbea29cab1e2d43cdb7de609c971?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>egiova<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>December 4, 2013 at 2:48 am<\/small><\/time><\/p>\n<div class=\"bq_content\">Excellent little trick to avoid \u201clight pollution\u201d. What about side effects on touch screens?However, it remains to be tested at large scale. But good clue to follow\u2026<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/52e1fbea29cab1e2d43cdb7de609c971?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>egiova<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-12-04 2:48<\/small><\/time><\/p>\n<div class=\"bq_content\">\u907f\u514d\u201c\u5149\u6c61\u67d3\u201d\u4e0d\u9519\u7684\u5c0f\u4f0e\u4fe9\u3002\u89e6\u6478\u5c4f\u5e55\u7684\u526f\u4f5c\u7528\u600e\u4e48\u529e\u5462\uff1f\u663e\u7136\uff0c\u8fd9\u8fd8\u9700\u8981\u5927\u89c4\u6a21\u7684\u6d4b\u8bd5\u3002\u4f46\u662f\u503c\u5f97\u8ddf\u8fdb\u2026\u2026<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u6709\u7591\u95ee\uff0c\u6ca1\u6709\u5b9e\u8df5~<\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/d1b157ac9ada42f053460513fa9d8e7b?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Greg Whitworth<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>December 6, 2013 at 3:50 am<\/small><\/time><\/p>\n<div class=\"bq_content\">@Manumanu @RyanSeddon He is somewhat correct in regards to how IE11 handles :hover on scroll. To keep the explanation simple (we may post a blog post for more detail on the matter), we turn off hit testing if the mouse isn\u2019t moving so you won\u2019t get any un-necessary paints, however, there are some caveats to this for compatibility reasons. Even when using your suggested CSS+JS trick you won\u2019t get too much perf increase in IE11 due to the fact that we use independent rendering (we\u2019re rendering on a separate thread from the UI thread) but it would free up some CPU cycles for any script you might be running. Hope that helps!<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/d1b157ac9ada42f053460513fa9d8e7b?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Greg Whitworth<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-12-6 3:50<\/small><\/time><\/p>\n<div class=\"bq_content\">@Manumanu @RyanSeddon \u4ed6\u5bf9IE11\u7684<code>:hover<\/code>\u5728\u6eda\u52a8\u4e0a\u7684\u8ba4\u8bc6\u6216\u591a\u6216\u5c11\u662f\u6b63\u786e\u7684\u3002\u4e3a\u4e86\u89e3\u91ca\u7b80\u5355\uff08\u5173\u4e8e\u6b64\u8bdd\u9898\u7684\u7ec6\u8282\u6211\u4eec\u53ef\u4ee5\u53d1\u8868\u4e00\u7bc7\u535a\u6587\uff09\uff0c\u6211\u4eec\u53ef\u4ee5\u7b80\u5355\u7406\u89e3\u4e3a\uff0c\u5982\u679c\u9f20\u6807\u4e0d\u79fb\u52a8\uff0c\u6211\u4eec\u5173\u95ed<code>hit testing<\/code>, \u8fd9\u6837\u5c31\u4e0d\u4f1a\u6709\u65e0\u6240\u8c13\u7684\u7ed8\u5236\uff0c\u4f46\u8003\u8651\u5230\u517c\u5bb9\u539f\u56e0\uff0c\u8fd8\u9700\u8981\u4e00\u4e9b\u6ce8\u610f\u4e8b\u9879\u3002\u5373\u4f7f\u4f7f\u7528\u4f60\u63d0\u51fa\u7684CSS+JS\u6280\u5de7\uff0c\u5728IE11\u4e2d\u4e5f\u4e0d\u4f1a\u5f97\u5230\u5f88\u5b8c\u7f8e\u7684\u6027\u80fd\u63d0\u5347\u3002\u56e0\u4e3a\u6211\u4eec\u4f7f\u7528\u4e86\u72ec\u7acb\u6e32\u67d3\uff08\u4f7f\u7528\u5206\u79bb\u7684UI\u7ebf\u7a0b\u8fdb\u5ea6\u6e32\u67d3\uff09\uff0c\u5b83\u4f1a\u4e3a\u4f60\u8fd0\u884c\u7684\u4efb\u4f55\u811a\u672c\u8fdb\u884c\u5468\u671f\u6027\u7684CPU\u91ca\u653e\u3002\u5e0c\u671b\u8fd9\u4e2a\u6709\u6240\u5e2e\u52a9\uff01<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<div class=\"bq_author\">\/\/zxx: &#8220;hit testing&#8221;\u5728<a href=\"http:\/\/en.wikipedia.org\/wiki\/Hit_detection\">\u7ef4\u57fa\u4e0a\u7684\u89e3\u91ca<\/a>\u662f\uff1a\u5728\u8ba1\u7b97\u673a\u56fe\u5f62\u7f16\u7a0b\u4e2d\uff0c<code>hit-testing<\/code>\u662f\u4e00\u4e2a\u786e\u5b9a\u7528\u6237\u7684\u5149\u6807\uff08\u5982\u9f20\u6807\u5149\u6807\uff0c\u63a5\u89e6\u70b9\u6216\u89e6\u6478\u5c4f\u754c\u9762\uff09\u662f\u5426\u4e0e\u5c4f\u5e55\u4e0a\u7ed8\u5236\u7684\u7ed9\u5b9a\u56fe\u5f62\u5bf9\u8c61\uff08\u5982\u5f62\u72b6\uff0c\u7ebf\u548c\u66f2\u7ebf\uff09\u76f8\u4ea4\u63a5\u7684\u8fc7\u7a0b\u3002Hit-testing\u53ef\u4ee5\u5728\u9f20\u6807\u6216\u5176\u4ed6\u6307\u9488\u8bbe\u5907\u79fb\u52a8\u6216\u542f\u52a8\u6267\u884c\u3002<\/p>\n<p>\u5728Web\u7f16\u7a0b\u8bed\u8a00(\u5982CSS, HTML, SVG)\u4e2d\uff0c\u8fd9\u662f\u4e0e<code>pointer-events<\/code>\uff08\u5982\u7528\u6237\u53d1\u8d77\u7684\u5149\u6807\u79fb\u52a8\u6216\u5bf9\u8c61\u9009\u62e9\uff09\u7684\u6982\u5ff5\u76f8\u5173\u8054\u7684\u3002<\/p>\n<p>\u542c\u53e3\u6c14\uff0c\u8fd9\u4f4d\u5144\u5f1f\u662f\u5728IE\u5e72\u6d3b\u7684\u5417\uff1f\u4f3c\u4e4e\u603b\u662f\u628aIE11\u79f0\u4e3a\u6211\u4eec~~\u4e0d\u89e3~~<\/p><\/div>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/8a27ebae306bac68b54c32832ded3e01?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Yuanyan<\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>December 9, 2013 at 6:37 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">If u do it, it will make scrolling not work on mobile device.Test on mobile that \u201cpointer-events: none\u201d will disable the touch events. It\u2019s seems not a good hack for mobile web.<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/0.gravatar.com\/avatar\/8a27ebae306bac68b54c32832ded3e01?s=32&#038;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Yuanyan<\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-12-9 18:37<\/small><\/time><\/p>\n<div class=\"bq_content\">\u5982\u679c\u4f60\u780d\u4e86\u8fd9\u4e00\u5200\uff0c\u79fb\u52a8\u8bbe\u5907\u7684\u6eda\u52a8\u76f4\u63a5\u6bd9\u547d\u3002\u7ecf\u6d4b\u8bd5\uff0c<code>pointer-events: none<\/code>\u4f1a\u5e72\u6389<code>touch<\/code>\u4e8b\u4ef6\u3002\u8c8c\u4f3c\u6b64\u6280\u5de7\u5bf9\u79fb\u52a8web\u4e0d\u9002\u7528\u554a\uff01<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u8c8c\u4f3c\u662f\u56fd\u4eba\u554a\uff0c\u8fd8\u8c8c\u4f3c\u662f\u6211\u5382\u7684\u540c\u884c\u3002\u5fae\u535a\u662f<a href=\"http:\/\/weibo.com\/caoyuanyan\">@\u5143\u5f66<\/a>\uff0c\u5927\u5bb6\u52a0\u7c89\u7684\u65f6\u5019\u8bb0\u5f97\u8865\u4e0a\u4e00\u5200\uff0c\u8bf4\u662f\u6211\u63a8\u8350\u7684\uff0c(*^__^*) <\/p>\n<div class=\"fix bq_box\">\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/3d2df36c61838b600118f56defc049ef?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Alex <\/i> says:<\/div>\n<p><time class=\"bq_time\"><small>December 9, 2013 at 8:17 pm<\/small><\/time><\/p>\n<div class=\"bq_content\">Firefox also turns off hit testing while scrolling, and from a quick test of the test page this trick would probably slow it down (Changing the pointer-events causes it to repaint whatever the mouse was hovering over when the scroll started, which it doesn\u2019t do otherwise)<\/div>\n<\/blockquote>\n<\/div>\n<div class=\"float_two\">\n<blockquote>\n<div class=\"bq_title\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.gravatar.com\/avatar\/3d2df36c61838b600118f56defc049ef?s=32&#038;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&#038;r=PG\" width=\"32\" height=\"32\"><i>Alex <\/i> \u8bf4\uff1a<\/div>\n<p><time class=\"bq_time\"><small>2013-12-9 20:17<\/small><\/time><\/p>\n<div class=\"bq_content\">Firefox\u6eda\u52a8\u65f6\u5019\u4e5f\u4f1a\u5173\u95ed<code>hit testing<\/code>, \u9762\u5bf9\u672c\u6587\u7684\u6d4b\u8bd5\u9875\u9762\u7684\u5feb\u901f\u6d4b\u8bd5\uff0c\u8fd9\u79cd\u5904\u7406\u53ef\u80fd\u4f1a\u964d\u4f4e\u9875\u9762\u901f\u5ea6\uff08\u4f46\u662f\uff0c\u5982\u679c\u6d4f\u89c8\u5668\u4e0d\u8fd9\u4e48\u505a\uff0c\u90a3\u5728\u6eda\u52a8\u5f00\u59cb\u7684\u65f6\u5019\u6539\u53d8<code>pointer-events<\/code>\u4f1a\u5bfc\u81f4\u65e0\u8bba\u9f20\u6807\u79fb\u5230\u54ea\u91cc\u90fd\u4f1a\u91cd\u7ed8\uff09<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<p class=\"bq_author\">\/\/zxx: \u5c3c\u739b\uff0c\u6211\u5c3d\u529b\u4e86\u3002\u6211\u5b9e\u5728\u4e0d\u77e5\u9053\u8fd9\u4f4d\u5144\u5f1f\u8981\u8bb2\u7684\u662f\u4ec0\u4e48\u610f\u601d\u3002\u4e0d\u662f\u4ed6\u8bf4\u7684\u4e0d\u61c2\uff0c\u800c\u662f\u6211\u88ab\u5934\u50cf\u5413\u4f4f\u4e86\u3002\u6b22\u8fce\u5927\u5bb6\u5e2e\u5fd9\u7ea0\u6b63\uff01<\/p>\n<h3>\u4e94\u3001\u5b9e\u8df5\u51fa\u771f\u77e5<\/h3>\n<p>\u4e0a\u9762\u7684\u8bc4\u8bba\u4e3a\u6211\u4eec\u6253\u5f00\u770b\u5f88\u591a\u5929\u7a97\u3002<\/p>\n<p>\u6211\u4eec\u770b\u5230\u4e86\u5f88\u591a\u9700\u8981\u6211\u4eec\u81ea\u5df1\u52a8\u624b\u53bb\u8bd5\u9a8c\u7684\u4e1c\u897f\uff0c\u6bd4\u5982IE11\u7684\u7ed8\u5236\u5448\u73b0\u5e27\u6d4b\u8bd5\uff0c<code>div<\/code>\u5c42\u8986\u76d6\u6d4b\u8bd5\uff0cFireFox\u5929\u7136\u6eda\u52a8\u4f53\u9a8c\uff0cChrome\u6d4f\u89c8\u5668\u4e0b\u4eb2\u81ea\u6d4b\u8bd5\u7b49\u3002<\/p>\n<p>\u4e3a\u4e86\u5f97\u5230\u66f4\u5e7f\u6cdb\u66f4\u5177\u6709\u4ef7\u503c\u7684\u6d4b\u8bd5\u7ed3\u679c\uff0c\u6211\u4eec\u4f7f\u7528\u81ea\u5df1\u8bbe\u8ba1\u7684\u6d4b\u8bd5\u9875\u9762\uff0c\u542b\u534a\u900f\u660e\uff0c\u6295\u5f71\u4ee5\u53ca\u7eb9\u7406\u80cc\u666f\u3002<\/p>\n<p>\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a class=\"a_link\" href=\"http:\/\/www.zhangxinxu.com\/study\/201401\/pointer-events-none-avoiding-unnecessary-paints.html\" target=\"_blank\">\u6eda\u52a8\u4e0ehover\u7ed8\u5236\u65f6\u95f4\u6d4b\u8bd5demo<\/a><\/p>\n<p>\u8fdb\u5ea6demo\uff0c\u4f1a\u770b\u5230\u4e00\u6392\u6392\u5f20\u542b\u97f5\u7684\u4e0a\u9762\u6709\u5982\u4e0b\u56fe\u6240\u793a\u7684\u51e0\u4e2a\u6309\u94ae\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-03_233615.png\" width=\"492\" height=\"168\" alt=\"\u6d4b\u8bd5\u9875\u9762\u7684\u51e0\u4e2a\u6309\u94ae\" class=\"alignnone\" \/><\/p>\n<p>\u70b9\u51fb\u7b2c\u4e00\u4e2a\u6309\u94ae\u4f1a\u7ed9<code>body<\/code>\u6dfb\u52a0<code>pointer-events:none<\/code>\uff1b\u70b9\u51fb\u7b2c\u4e8c\u4e2a\u6309\u94ae\u4f1a\u6709\u4e00\u4e2a\u5c42\u8986\u76d6\u5728\u9875\u9762\u4e0a\u3002\u901a\u8fc7ESC\u952e\u53ef\u4ee5\u53d6\u6d88\u4e4b\u524d\u4efb\u610f\u4e24\u4e2a\u7981\u7528<code>hit testing<\/code>\u64cd\u4f5c\u3002<\/p>\n<p>\u6d4b\u8bd5\u7684\u65b9\u6cd5\u662f\uff0c\u9f20\u6807\u4f4d\u7f6e\u4e0d\u53d8\uff08\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u91cd\u7ed8\uff09\uff0c\u4e0a\u4e0b<span style=\"color:#cd0000;\">\u5feb\u901f\u6eda\u52a8<\/span>\u9f20\u6807\u3002\u7531\u4e8e\u9f20\u6807\u8981\u53bb\u70b9\u51fb\u505c\u6b62\u8bb0\u5f55\u6309\u94ae\uff0c\u4e5f\u4f1a\u6709\u91cd\u7ed8\u51fa\u73b0\u3002\u56e0\u6b64\uff0c\u672b\u5c3e\u7684\u6570\u636e\u4e0d\u53ef\u4fe1\uff0c\u4e3b\u8981\u770b\u622a\u56fe\u7684\u4e2d\u95f4\u4e3b\u4f53\u90e8\u5206\u3002\u5173\u6ce8fps\u7b49\u5e27\u9891\u4fe1\u606f\u3002<\/p>\n<p>\u5206\u522b\u6d4b\u8bd5\u4e86\u5982\u4e0b\u4e09\u79cd\u72b6\u6001\uff1a<strong>1. \u9ed8\u8ba4\u6eda\u52a8\uff1b<\/strong> <strong>2. pointer-events:none\u4e0b\u7684\u6eda\u52a8;<\/strong> <strong>3. div fixed\u5b9a\u4f4d\u5c42\u8986\u76d6\u540e\u7684\u6eda\u52a8<\/strong><\/p>\n<p>\u4ee5\u4e0b\u6570\u4e2a\u6d4b\u8bd5\u622a\u56fe\u90fd\u662f\u6309\u7167\u8fd9\u4e09\u4e2a\u72b6\u6001\u4e0b\u62c9\u7684\u3002<\/p>\n<p><strong>1. <\/strong>\u4e0b\u9762\u4e09\u5f20\u56fe\u662f\u81ea\u5df1\u5728<strong>\u6700\u65b0\u7248IE11\u6d4f\u89c8\u5668\u4e0b<\/strong>\u7684\u8fde\u7eed\u4e09\u4e2a\u6d4b\u8bd5\u622a\u56fe\uff1a<\/p>\n<p><strong>\u9ed8\u8ba4\u6eda\u52a8\uff1a<\/strong><\/p>\n<div class=\"img_hide_right\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-03_221642.png\" width=\"1046\" height=\"279\" alt=\"\u9ed8\u8ba4\u6001\u4e0b\u7684\u6eda\u52a8\u5448\u73b0\" class=\"alignnone\" \/><\/div>\n<p><strong>pointer-events:none\u7ed8\u5236\uff1a<\/strong><\/p>\n<div class=\"img_hide_right\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-03_222234.png\" width=\"1295\" height=\"286\" alt=\"pointer-events:none\u72b6\u6001\u4e0b\u7684\u6eda\u52a8\" class=\"alignnone\" \/><\/div>\n<p><strong>div\u5143\u7d20\u8986\u76d6\u7ed8\u5236\uff1a<\/strong><\/p>\n<div class=\"img_hide_right\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-03_222310.png\" width=\"1264\" height=\"270\" alt=\"div\u5c42\u8986\u76d6\u4e0b\u7684\u6eda\u52a8\u5448\u73b0\" class=\"alignnone\" \/><\/div>\n<p><strong>2.<\/strong> \u8fd9\u662f\u6211<strong>\u672c\u673aChrome26\u6d4b\u8bd5\u7684\u7ed3\u679c<\/strong>\uff1a<\/p>\n<p><strong>\u9ed8\u8ba4\u6eda\u52a8\uff1a<\/strong><\/p>\n<div class=\"img_hide_right\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-02_223741.png\" width=\"987\" height=\"81\" alt=\"\u9ed8\u8ba4\u6eda\u52a8hover\u7684\u7ed8\u5236\" class=\"alignnone\" \/><\/div>\n<p><strong>pointer-events:none\u7ed8\u5236\uff1a<\/strong><\/p>\n<div class=\"img_hide_right\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-02_230726.png\" width=\"985\" height=\"82\" alt=\"pointer-events:none\u7684\u6e32\u67d3\" class=\"alignnone\" \/><\/div>\n<p><strong>div\u5143\u7d20\u8986\u76d6\u7ed8\u5236\uff1a<\/strong><\/p>\n<div class=\"img_hide_right\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-03_003225.png\" width=\"990\" height=\"82\" alt=\"\u521b\u5efa\u8986\u76d6div\u5143\u7d20\u7684\u7ed8\u5236\" class=\"alignnone\" \/><\/div>\n<p><strong>3.<\/strong> \u4e0b\u9762\u4e09\u5f20\u56fe\u662f<strong>\u516c\u53f8\u673aChrome31\u4e0b\u6d4b\u8bd5\u7ed3\u679c<\/strong>\uff1a<br \/>\n<strong>\u9ed8\u8ba4\u6eda\u52a8\uff1a<\/strong><\/p>\n<div class=\"img_hide_right\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-02_182659.png\" width=\"1545\" height=\"81\" alt=\"pointer-events:none\u6001\u7684\u9f20\u6807hover+\u6eda\u52a8\u6548\u679c\" class=\"alignnone\" \/><\/div>\n<p><strong>pointer-events:none\u7ed8\u5236\uff1a<\/strong><\/p>\n<div class=\"img_hide_right\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-02_182759.png\" width=\"1510\" height=\"82\" alt=\"\u9ed8\u8ba4\u6001\u7684hover+\u6eda\u52a8\u6548\u679c\" class=\"alignnone\" \/><\/div>\n<p><strong>div\u5143\u7d20\u8986\u76d6\u7ed8\u5236\uff1a<\/strong><\/p>\n<div class=\"img_hide_right\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-02_182859.png\" width=\"1545\" height=\"84\" alt=\"\u8986\u76d6\u5c42\u4e0b\u7684\u6eda\u52a8\u5448\u73b0\u901f\u7387\u6548\u679c\" class=\"alignnone\" \/><\/div>\n<p>\u90fd\u662f\u7eaf\u624b\u5de5\u7684\u6d4b\u8bd5\uff0c\u56e0\u6b64\uff0c\u6d4b\u8bd5\u7ed3\u679c\u622a\u56fe\u957f\u5f97\u4e0d\u662f\u5f88\u6574\u7406\uff0c\u4f46\u662f\uff0c\u8db3\u591f\u8bf4\u660e\u4e00\u4e9b\u95ee\u9898\u4e86\uff0c\u6211\u89c9\u5f97\u662f\u5f88\u6709\u610f\u601d\u7684\u4e00\u4e9b\u95ee\u9898\uff0c\u5c24\u5176\u7ed3\u5408\u4f17\u8001\u5916\u7684\u4e00\u4e9b\u7cbe\u5f69\u8bc4\u8bba\u3002<\/p>\n<ol>\n<li>\u9996\u5148\uff0c\u5bf9\u6bd4IE11, Chrome26\u4ee5\u53caChrome31\u7684\u6d4b\u8bd5\u7ed3\u679c\uff0c\u53ef\u4ee5\u53d1\u73b0\uff0cdiv\u5c42\u8986\u76d6\u7684\u65b9\u6cd5\u7edd\u5bf9\u662f\u5448\u73b0\u6027\u80fd\u6700\u5dee\u7684\uff0c\u57fa\u672c\u4e0a\u8981\u595430\u5e27\/\u79d2\u7684\u9891\u7387\u53bb\u4e86\u3002\u4f46\u662f\uff0c\u7b2c8\u6761\u8bc4\u8bba\u4e2dChip\u5bf9<code>div<\/code>\u8986\u76d6\u65b9\u6cd5\u8d5e\u4e0d\u7edd\u53e3\uff0c\u8bf4\u662f\u6700\u4f73\u5b9e\u8df5\uff0c<code>60fps<\/code>.\n<p>\u600e\u4e48\u56de\u4e8b\uff1f\u7ec6\u7ec6\u9605\u8bfb\u4f1a\u53d1\u73b0\uff0c\u5176\u5173\u6ce8\u7684\u662f\u201c\u91cd\u8ba1\u7b97\u201d\uff0c\u4e5f\u5c31\u662f<code>recalculate<\/code>. \u89c1\u4e0b\u56fe\u9ad8\u4eae\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-04_001635.png\" width=\"348\" height=\"120\" alt=\"\u91cd\u8ba1\u7b97\u9ad8\u4eae\u663e\u793a\" class=\"alignnone\" \/><\/p>\n<p>\u800c\u4e0d\u662f\u6211\u4eec\u8fd9\u91cc\u7740\u91cd\u63a2\u8ba8\u7684\u5448\u73b0 &#8211; paint.<\/p>\n<p>\u81f3\u4e8e<code>div<\/code>\u5c42\u8986\u76d6\u6cd5\u5bf9fps\u7684\u5f71\u54cd\uff0c\u6839\u636e\u6211\u5728Chrome26\u4e0b\u4e0d\u592a\u4e13\u4e1a\u7684\u6d4b\u8bd5\uff0c\u4f3c\u4e4e\u662f\u76f8\u53cd\u7684\u7ed3\u8bba\u3002\u7cbe\u529b\u539f\u56e0\uff0c\u6211\u5c31\u4e0d\u6df1\u5165\u6d4b\u8bd5\uff0c\u60a8\u6709\u5174\u8da3\u53ef\u4ee5\u7a0d\u7a0d\u7814\u7a76\u4e0b\uff0c\u53d1\u4e2a\u535a\u6587\u6216\u8005\u5fae\u535a\u4ec0\u4e48\u7684\u3002<\/li>\n<li>IE11\u81ea\u8eab\u7eb5\u5411\u5bf9\u6bd4\u3002\u8089\u773c\u89c2\u5bdf\u6765\u770b\uff0c<code>pointer-events:none<\/code>\u4f3c\u4e4e\u8981\u6bd4\u9ed8\u8ba4\u6001\u6eda\u52a8\u7684\u5448\u73b0\u8981\u5feb\u90a3\u4e48\u4e00\u70b9\u70b9\uff0c\u4f46\u662f\uff0c\u771f\u7684\u5e76\u4e0d\u660e\u663e\u3002\u8fd9\u4f3c\u4e4e\u6b63\u5982\u7f16\u53f7\u4e3a30\u7684\u8bc4\u8bba\u6240\u8bf4\uff0c\u672c\u6587\u7684CSS+JS\u6280\u5de7\u4e0d\u4f1a\u5728IE11\u4e0b\u5f97\u5230\u5b8c\u7f8e\u7684\u6027\u80fd\u63d0\u5347\u3002\u56e0\u4e3aIE11\u672c\u8eab\u7684\u6e32\u67d3\u4ee5\u53caCPU\u56de\u6536\u7b49\u90fd\u6709\u81ea\u5df1\u7684 \u4f18\u5316\u673a\u5236\u3002<\/li>\n<li>\u518d\u4eceChrome26\u6d4f\u89c8\u5668\u7684\u7eb5\u5411\u5bf9\u6bd4\u6765\u770b\uff0c\u4f3c\u4e4e<code>pointer-events:none<\/code>\u6709\u8fd8\u662f\u6ca1\u6709\u6ca1\u4ec0\u4e48\u533a\u522b\u554a\u3002\u8fd9\u4e2a\u662f\u4e0d\u662f\u51fa\u4e4e\u610f\u6599\u4e86\uff01\u6211\u62ff\u8001\u5916\u7684\u90a3\u4e2a\u6d4b\u8bd5\u9875\u9762\u6d4b\u8bd5\uff0c\u53d1\u73b0\uff0c\u786e\u5b9e\u6ca1\u6709\u4ec0\u4e48\u5dee\u5f02\uff01<\/li>\n<li>\u6211\u4eec\u518d\u62ffChrome26\u6a2a\u5411\u5bf9\u6bd4Chrome31\u6d4f\u89c8\u5668\uff0c\u4f1a\u53d1\u73b0Chrome31\u6d4f\u89c8\u5668\u4e0b\uff0c\u6d4f\u89c8\u5668\u7684\u7ed8\u5236\u5448\u73b0\u65f6\u95f4\u57fa\u672c\u4e0a\u5c31\u6ca1\u6709\u4e86\uff01\u800c<code>div<\/code>\u8986\u76d6\u65f6\u95f4\u7c7b\u4f3c\u3002\u8bf4\u660e\u5dee\u5f02\u4e0d\u662f\u7cfb\u7edf\u9020\u6210\u7684\uff0c\u53ea\u53ef\u80fd\u662f\uff0cChrome\u968f\u7740\u7248\u672c\u7684\u5347\u7ea7\uff0c\u5728\u6e32\u67d3\u5448\u73b0\u6027\u80fd\u4e0a\u4e5f\u6709\u4e86\u63d0\u5347\u3002<\/li>\n<li>Chrome31\u9ed8\u8ba4\u72b6\u6001\u548c<code>pointer-events:none<\/code>\u72b6\u6001\u5bf9\u6bd4\uff0c\u60a8\u4f1a\u53d1\u73b0\uff0c\u4f3c\u4e4e\u5dee\u522b\u4e0d\u5927\uff0c\u9ed8\u8ba4\u6001\u9664\u4e86\u51e0\u4e2a\u5192\u5c16\u7684\u67f1\u72b6\u56fe\uff0c\u5176\u4ed6\u57fa\u672c\u4e0a\u548c<code>pointer-events:none<\/code>\u7c7b\u4f3c\u3002\u548b\u56de\u4e8b\uff1f\n<p>Chrome31\u7684\u8fd9\u4e09\u5f20\u56fe\u5b9e\u9645\u4e0a\u662f\u6700\u5148\u6d4b\u8bd5\u7684\uff0c\u5e76\u672a\u6ce8\u610f\u5230\u9f20\u6807\u4e0d\u80fd\u79fb\u52a8\u8fd9\u4e00\u7ec6\u8282\u3002\u6211\u6ca1\u4f30\u8ba1\u9519\u7684\u8bdd\uff0c\u5192\u5c16\u7684\u51e0\u4e2a\u5c0f\u7eff\u67f1\u5b50\u5e94\u8be5\u662f\u9f20\u6807\u79fb\u52a8\u9020\u6210\u7684\u3002\u5982\u679c\u6211\u7684\u8fd9\u4e2a\u63a8\u8bba\u6b63\u786e\u7684\u8bdd\uff0c\u90a3\u5c82\u4e0d\u662f\u5982\u679c\u9f20\u6807\u4e0d\u79fb\u52a8\uff0c\u5355\u7eaf\u6eda\u52a8\u7684\u8bdd\uff0c<code>pointer-events:none<\/code>\u52a0\u4e0e\u4e0d\u52a0\u662f\u6ca1\u6709\u4efb\u4f55\u533a\u522b\u7684\uff1f\uff01<\/p>\n<p>\u6ca1\u9519\uff01\u6211\u5c31\u662f\u8981\u544a\u8bc9\u4f60\u4eec\uff0c<strong>pointer-events:none\u63d0\u9ad8\u9875\u9762\u6eda\u52a8\u65f6\u5019\u7684\u7ed8\u5236\u6027\u80fd<span style=\"color:#cd0000;\">\u662f\u4e0d\u51c6\u786e\u7684<\/span>\uff01<\/strong><\/p>\n<p>\u60a8\u53ef\u80fd\u4f1a\u7591\u60d1\uff0c\u54ce\u5440\uff0c\u539f\u4f5c\u8005\u89c6\u9891\u90fd\u51fa\u6765\u4e86\uff0c\u786e\u5b9e\u7ed8\u5236\u67f1\u72b6\u56fe\u5dee\u5f02\u660e\u663e\u554a\uff01\u6211\u81ea\u5df1\u53bbdemo\u9875\u9762\u6d4b\u8bd5\uff0c\u4e5f\u662f\u5982\u6b64\u554a\uff01\u5144\u5f1f\uff0c\u5b9e\u9645\u4e0a\uff0c\u539f\u4f5c\u8005\u53d8\u4e86\u4e2a\u9b54\u672f\u800c\u5df2\uff0c\u4e00\u4e2a\u8fd1\u666f\u9b54\u672f\uff01<\/p>\n<p>\u4f60\u6709\u6ca1\u6709\u60f3\u8fc7\u8fd9\u4e48\u4e00\u4e2a\u95ee\u9898\uff1a\u4e3a\u4f55\u4f5c\u8005\u7684\u5b9a\u65f6\u5668\u95f4\u9694\u8981\u8bbe\u7f6e\u6210<code>500<\/code>\u6beb\u79d2\u8fd9\u4e48\u4e45\uff1f\u5f53\u6eda\u52a8\u7ed3\u675f\uff0c\u6211\u4eec\u60f3\u70b9\u51fb\u4e00\u4e2a\u4e1c\u897f\uff0c\u53ea\u8981\u901f\u5ea6\u4e00\u5feb\uff0c\u5c82\u4e0d\u662f\u6839\u672c\u5c31\u6ca1\u6548\u679c\uff01\u5982\u6b64\u5927\u7684\u53ef\u7528\u6027\u98ce\u9669\uff0c\u4e3a\u4f55\u4e0d\u8bbe\u7f6e\u4e2a<code>100<\/code>\u6beb\u79d2\u5462\uff0c\u6b63\u5982\u8bc4\u8bba(\u7f16\u53f78)\u4e2d\u67d0\u4eba\u8bf4\u7684\u4e00\u6837\uff1f<\/p>\n<p>\u7b54\u6848\u5f88\u7b80\u5355\u3002\u4e3a\u4e86\u6d4b\u8bd5\u7ed3\u679c\u597d\u770b\uff0c\u6570\u636e\u5bf9\u6bd4\u660e\u663e\uff0c\u5e72\u6270\u6761\u4ef6\u51cf\u5c11\uff01<\/p>\n<p>\u8bd5\u60f3\u4e0b\uff0c\u5b9a\u65f6\u5668\u95f4\u9694\u5982\u679c\u662f<code>100<\/code>\u6beb\u79d2\uff0c\u5982\u679c\u6eda\u52a8\u7a0d\u5fae\u6162\u4e00\u70b9\uff0c\u5c82\u4e0d\u662f<code>body<\/code>\u5c31\u4f1a\u53d1\u751f\u72b6\u6001\u53d8\u5316\uff0c\u7c7b\u540d\u79fb\u9664\uff0c\u9875\u9762\u91cd\u8ba1\u7b97\uff0c\u6d4b\u8bd5\u6570\u636e\u53d8\u6210\u9ed8\u8ba4\u6001\u6570\u636e\uff0c\u6570\u636e\u6c61\u67d3\uff0c\u67f1\u72b6\u56fe\u4ece\u5e73\u539f\u53d8\u5c71\u5cf0\u3002\u5982\u679c\u4e00\u4e0d\u5c0f\u5fc3\u53c8\u6eda\u5feb\u4e86\uff0c<code>body<\/code>\u518d\u53d8\u5316\uff0c\u91cd\u8ba1\u7b97\u4e0e\u91cd\u7ed8\u5c31\u4f1a\u4ea4\u66ff\u51fa\u73b0\u3002\u91cd\u8ba1\u7b97\u5e72\u6270+\u72b6\u6001\u4e0d\u7a33\u5b9a\uff0c\u5fc5\u7136\u5bfc\u81f4\u6d4b\u8bd5\u6570\u636e\u4e0d\u597d\u770b\u3002\u56e0\u6b64\uff0c\u5c0f\u95f4\u9694\u65f6\u95f4\u5b9a\u65f6\u5668\u4e0d\u5408\u9002\u3002<\/p>\n<p>\u4f46\u8fd9\u4e2a\u539f\u56e0\u5176\u5b9e\u4e0d\u662f\u4e3b\u8981\u539f\u56e0\u3002<\/p>\n<p>\u5982\u679c\u95f4\u9694\u65f6\u95f4\u662f<code>100<\/code>\u6beb\u79d2\uff0c\u6211\u4eec\u8981\u60f3\u4e00\u76f4\u4fdd\u6301<code>pointer-events:none<\/code>\u72b6\u6001\uff0c\u52bf\u5fc5\u6eda\u52a8\u7684\u65f6\u5019\u8981\u901f\u5ea6\u6bd4\u8f83\u5feb\u3002\u95ee\u9898\u6765\u4e86\uff0c\u8fd9\u6eda\u52a8\u901f\u5ea6\u4e00\u5757\uff0c\u4f60\u5c31\u4f1a\u53d1\u73b0\uff0c\u9ed8\u8ba4\u72b6\u6001\u7684\u91cd\u7ed8\u65f6\u95f4\u4e5f\u662f60fps\u7684\uff0c\u67f1\u72b6\u6761\u7684\u9ad8\u5ea6\u4e0e<code>pointer-events:none<\/code>\u7c7b\u4f3c\u3002\u8fd9\u4e0d\u50bb\u903c\u4e86\u5417\uff1f\u8fd9\u9b54\u672f\u4e0d\u4e45\u7a7f\u5e2e\u4e86\u5417\uff1f<\/p>\n<p>\u56e0\u6b64\uff0c\u4fdd\u9669\u8d77\u89c1\uff0c\u5b9a\u65f6\u5668\u95f4\u9694\u8fd8\u662f<code>500<\/code>\u6beb\u79d2\u7684\u597d\uff01<\/p>\n<p>\u6211\u5728\u5bf9\u4e00\u5e72\u8bc4\u8bba\u7684\u9ebb\u8fa3\u70b9\u8bc4\u4e2d\u591a\u6b21\u63d0\u5230\uff1aChrome\u6d4f\u89c8\u5668\u4e0d\u662f\u50bb\u5b50\uff0c\u4e0d\u4f1a\u8003\u8651hover\u91cd\u7ed8\u4e0e\u6eda\u52a8\u7684\u6027\u80fd\u4f18\u5316\uff1f<\/p>\n<p>\u7c7b\u4f3c\u7684\u4f18\u5316\u5728IE11\u4ee5\u53caFireFox\u6d4f\u89c8\u5668\u4e2d\u5747\u6709\u3002\u5176\u4e2d\uff0cFireFox\u6d4f\u89c8\u5668\u5c24\u5176\u660e\u663e\u3002\u4f60\u73b0\u5728\u7528FireFox\u6253\u5f00demo\u9875\u9762\uff0c\u9f20\u6807\u4f4d\u7f6e\u653e\u5728\u4efb\u610f\u56fe\u7247\u4e0a\uff0c\u4e0d\u79fb\u52a8\uff0c\u5355\u7eaf\u6eda\u52a8\u9f20\u6807\u8f6e\u5b50\u3002\u5f53\u4f60\u9f20\u6807\u505c\u6b62\uff0c\u4f60\u4f1a\u660e\u663e\u770b\u5230\u4e00\u5b9a\u5ef6\u8fdf\u65f6\u95f4\u540e\uff0chover\u6548\u679c\u624d\u5448\u73b0\u3002\u8fd9\u4e0d\u5c31\u662f<code>pointer-events:none<\/code>\u8981\u5b9e\u73b0\u7684\u72b6\u6001\u5417\uff1f<\/p>\n<p>Chrome\u6d4f\u89c8\u5668\u4e5f\u662f\u6709\u7684\uff0c\u4f46\u662f\uff0cChrome\u6d4f\u89c8\u5668\u7531\u4e8e\u81ea\u8eab\u6e32\u67d3\u6027\u80fd\u51fa\u4f17\uff0c\u56e0\u6b64\uff0c\u8fd9\u79cd\u5ef6\u8fdf\u65f6\u95f4\u6bd4\u8f83\u77ed\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u5982\u679c\u4f60\u7684\u9875\u9762\u6eda\u52a8\u6bd4\u8f83\u8fc5\u901f\uff0c\u4f60\u662f\u5b8c\u5168\u4e0d\u8981\u62c5\u5fc3<code>hover<\/code>\u6e32\u67d3\u95ee\u9898\u7684\u3002\u5982\u679c\u4f60\u6eda\u52a8\u6bd4\u8f83\u6162\uff0c\u6d4f\u89c8\u5668\u8ba4\u4e3a\u4f60\u5e0c\u671b\u67e5\u770b<code>hover<\/code>\u6001\uff0c\u8fd9\u4e0d\u633a\u597d\u7684\u3002<\/p>\n<p>\u7f16\u53f724\u8bc4\u8bba\u5410\u69fd\u9f20\u6807\u7ecf\u8fc7hover\u6548\u679c\u95ea\u554a\u95ea\u7684\uff0c\u4f53\u9a8c\u4e0d\u597d\u3002\u8bf8\u4f4d\uff0c\u8fd9\u5b8c\u5168\u662f\u53e6\u5916\u4e00\u7801\u4e8b\u4e86\uff0c\u5c31\u7b97\u4f60\u5e94\u7528\u4e86\u8fd9\u91cc\u7684<code>pointer-events:none<\/code>\u65b9\u6cd5\uff0c\u89e3\u51b3\u4e86\u6eda\u52a8\uff0c\u90a3\u4f60\u9f20\u6807\u7ecf\u8fc7\u8be5\u600e\u4e48\u5904\u7406\u5462\uff0c\u8fd8\u4e0d\u662f\u95ea\u554a\u95ea\uff1f\u83ab\u975e\u518d\u7ed9<code>document<\/code>\u7ed1\u5b9a<code>mousemove<\/code>\u4e8b\u4ef6\uff0c\u8981\u662f\u8fd9\u6837\uff0c\u4f60\u8ba9<code>a<\/code>\u94fe\u63a5\u60c5\u4f55\u4ee5\u582a\u3002\u8fd9\u79cd\u72b6\u51b5\u8fd8\u662f\u4e56\u4e56\u4f7f\u7528\u9f20\u6807<code>hover<\/code>\u5ef6\u65f6\u6267\u884c\u6280\u672f\u5427\uff0c\u4e0e\u8fd9\u91cc\u4e0d\u662f\u4e00\u7801\u4e8b\u3002\n<\/li>\n<\/ol>\n<p>\u7b80\u5355\u603b\u7ed3\u4e0b\u5c31\u662f\uff1a<code>div<\/code>\u8986\u76d6\u6cd5\u91cd\u7ed8\u635f\u8017\u660e\u663e\uff0c\u76f4\u63a5\u67aa\u6bd9\uff1b\u5feb\u901f\u6eda\u52a8\u4e0b\uff0c<code>pointer-events:none<\/code>\u5e76\u65e0\u6216\u6781\u5c11\u7ed8\u5236\u6027\u80fd\u63d0\u5347\uff1b\u6162\u901f\u6eda\u52a8\uff0c\u63d0\u9ad8\u91cd\u7ed8\u6709\u6ca1\u6709\u610f\u4e49\u3002<\/p>\n<h3>\u516d\u3001\u6211\u7684\u7efc\u5408\u7ed3\u8bba<\/h3>\n<p>\u4f17\u5bb6\u7cbe\u5f69\u8bc4\u8bba\u4e2d\u591a\u6b21\u63d0\u5230<code>pointer-events:none<\/code>\u5f71\u54cd\u89e6\u5c4f\u8bbe\u5907\u7684\u6eda\u52a8\uff0c\u5982\u624b\u673a\uff0cwindows 8\u7b49\u3002\u8fd9\u4e2a\u4e25\u91cd\u7684\u6027\u80fd\u7f3a\u9677\u663e\u7136\u5236\u7ea6\u4e86\u6b64\u65b9\u6cd5\u7684\u666e\u53ca\u3002<\/p>\n<p>\u5176\u6b21\uff0c\u539f\u6587\u4e5f\u63d0\u5230\u53e6\u5916\u4e00\u4e2a\u95ee\u9898\uff1a\u5b50\u5143\u7d20\u8bbe\u7f6e\u4e86<code>pointer-eventes: auto<\/code>\u4f1a\u5bfc\u81f4\u6eda\u52a8\u7684\u65f6\u5019\u9875\u9762\u95ea\u52a8\u3002\u9700\u8981\u4e0b\u9762\u7684\u4ee3\u7801\u4fee\u6b63\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>.disable-hover,\n.disable-hover * {\n    pointer-events: none !important;\n}<\/pre>\n<\/div>\n<p>\u597d\u9ebb\u70e6\uff0c\u4f4e\u6548\u9009\u62e9\u5668\uff0c\u8fd9\u4e0b\u9875\u9762\u7684\u4f30\u8ba1\u91cd\u8ba1\u7b97\u8981\u523030fps\u4e86\u3002<\/p>\n<p>\u6700\u540e\uff0c\u4e5f\u662f\u6700\u6700\u91cd\u8981\u7684\u3002<strong>\u51e0\u4e4e\u6240\u6709\u73b0\u4ee3\u6d4f\u89c8\u5668\u5929\u7136\u5177\u6709\u201c\u5feb\u901f\u6eda\u52a8hover\u7ed8\u5236\u7684\u6027\u80fd\u4fdd\u62a4\u201d<\/strong>\u3002\u4f55\u5fc5\u591a\u6b64\u4e00\u4e3e\u5403\u529b\u4e0d\u8ba8\u597d\u4f7f\u7528\u95ee\u9898\u591a\u591a\u7684<code>pointer-events:none<\/code>? <\/p>\n<p>\u56e0\u6b64\uff0c\u5982\u679c\u60a8\u5355\u7eaf\u60f3\u8981\u9875\u9762\u7684\u7ed8\u5236\u901f\u5ea6\uff0c\u6ca1\u6709\u4efb\u4f55\u7406\u7531\u4f7f\u7528<code>pointer-events:none<\/code>\u6280\u672f\u3002\u5982\u679c\u60a8\u662f\u5e0c\u671b\u7981\u7528\u67d0\u4e9b\u64cd\u4f5c\uff0c\u4f8b\u598226\u53f7\u8bc4\u8bba\u4e2d\u5730\u56fe\u7f29\u653e\u7684\u5904\u7406\u7b49\uff0c\u8fd9\u4e2a\u5012\u662f\u4f5c\u4e3a\u53c2\u8003\u6280\u672f\u3002<\/p>\n<p><code>pointer-events:none<\/code>\u6280\u672f\u53ea\u6709\u9875\u9762\u5728\u6162\u6eda\u52a8\u7684\u65f6\u5019\uff0c\u624d\u4f1a\u6709\u91cd\u7ed8\u6027\u80fd\u63d0\u9ad8\u4f18\u52bf\u3002\u4e0d\u8fc7\u8bdd\u8bf4\u8bdd\u4e86\uff0c\u4f60\u9875\u9762\u5982\u679c\u662f\u6162\u6eda\u52a8\uff0c\u8fd8\u9700\u8981\u788d\u4e8b\u7684<code>pointer-events:none<\/code>\u5417\uff1f<\/p>\n<p>\u518d\u9000\u4e00\u4e07\u6b65\u8bb2\uff0c\u5f53\u4e0bChrome\u6d4f\u89c8\u5668SVG\u52a8\u753b\u6ee1\u5929\u98de\u4e5f\u7167\u6837\u8dd1\u5f97\u5c41\u98a0\u5c41\u98a0\u7684\uff0c<code>hover<\/code>\u6240\u9020\u6210\u7684\u91cd\u7ed8\u5bf9\u7528\u6237\u800c\u8a00\u6839\u672c\u4e0d\u8db3\u4ee5\u9020\u6210\u4e1d\u6beb\u7684\u5f71\u54cd\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u6240\u8c13\u7684\u63d0\u9ad8<code>hover<\/code>\u7ed8\u5236\u65f6\u95f4\u7684\u6280\u672f\uff0c\u4f60\u5c31\u5f53\u8def\u8fb9\u8d70\u8fc7\u7684\u4e00\u4e2a\u7f8e\u5973\u5427\uff0c\u770b\u4e00\u4e0b\uff0c\u5fc3\u6251\u901a\u4e00\u4e0b\uff0c\u5c31\u8ba9\u5979\u8fc7\u53bb\u5427\uff0c\u5979\u4e0d\u9002\u5408\u4f60\u7684\uff01<\/p>\n<h3>\u4e03\u3001\u6545\u4e8b\u9700\u8981\u4e00\u4e2a\u7ed3\u5c3e<\/h3>\n<p>\u6211\u8001\u5a46\u66fe\u591a\u6b21\u66ff\u6211\u62c5\u5fe7\uff1a\u201c\u4f60\u628a\u6280\u672f\u90fd\u5206\u4eab\u51fa\u53bb\uff0c\u522b\u4eba\u90fd\u5b66\u4f1a\u4e86\u4f60\u7684\u6280\u672f\uff0c\u90a3\u4f60\u5c82\u4e0d\u662f\u66f4\u6709\u538b\u529b\u5566\uff1f\u201d<\/p>\n<p>\u6211\u8868\u793a\u6211\u4e00\u70b9\u90fd\u4e0d\u62c5\u5fc3\u3002<\/p>\n<p>\u4e4b\u524d\u77e5\u4e4e\u4e0a\u770b\u5230<a href=\"http:\/\/www.zhihu.com\/question\/21269266\">\u4e00\u4e2a\u8d5e\u975e\u5e38\u591a\u7684\u95ee\u9898<\/a>\uff1a\u201c2013 \u5e74\u9ad8\u8003\u72b6\u5143\u4e1a\u4f59\u7231\u597d\u5e7f\u6cdb\u4e5f\u770b\u7535\u89c6\u6253\u7f51\u6e38\uff0c\u662f\u6211\u4eec\u7d20\u8d28\u6559\u80b2\u5f00\u82b1\u7ed3\u679c\u4e86\u5417\uff1f\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201401\/2014-01-04_015749.png\" width=\"680\" height=\"429\" alt=\"3000\u591a\u8d5e\u7684\u56de\u7b54\" class=\"alignnone\" \/><\/p>\n<p>\u6211\u4e0d\u62c5\u5fc3\u7684\u539f\u56e0\u7c7b\u4f3c\uff1a\u201c<strong>\u4e13\u6ce8\u5ea6\u5dee\u592a\u591a\u4e86\uff01<\/strong>\u201d<\/p>\n<p>\u4e2d\u56fd\u7684\u73af\u5883\u597d\u554a\uff0c\u5927\u5bb6\u6d6e\u8e81\u554a\uff0c\u559c\u6b22\u5403\u73b0\u6210\u996d\u554a\u3002\u7c7b\u4f3c\u6587\u7ae0\u8bfb\u5b8c\u5c31\u89c9\u5f97\uff0c\u54e6\uff0c\u706d\u4e86\u4e2aboss\uff0c\u5347\u7ea7\u4e86\u3002\u771f\u7684\u5347\u7ea7\u4e86\u5417\uff1f\u7a81\u7136\u60f3\u8d77\u4e86\u53e5\u4e2d\u56fd\u53e4\u8bdd\uff1a\u662f\u77e5\u5176\u7136\u4e0d\u77e5\u5176\u6240\u4ee5\u7136\u3002\u5927\u5bb6\u5fd9\u7740\u8d5a\u94b1\u554a\uff0c\u7406\u8d22\u554a\uff0c\u5a31\u4e50\u554a\u5404\u79cd\u4e8b\u60c5\uff0c\u80fd\u62bd\u65f6\u95f4\u51fa\u6765\u5b66\u4e60\u5df2\u7ecf\u4e0d\u9519\u4e86\uff0c\u4f60\u8fd8\u8ba9\u6211\u8981\u6f5c\u5fc3\u4fee\u5b66\uff0c\u6df1\u5165\u601d\u8003\u3002\u554a\uff0c\u6211\u81ea\u5df1\u60f3\u60f3\u4e5f\u786e\u5b9e\u4e0d\u5bb9\u6613\u7684\u3002<\/p>\n<p>\u5982\u4f55\u80fd\u591f\u5230\u8fbe\u8d85\u51fa\u5e38\u4eba\u7684\u9ad8\u5ea6\uff0c\u6709\u4e2a\u4fbf\u6377\u7684\u65b9\u6cd5\uff0c\u90a3\u5c31\u662f\u7ad9\u5728\u5de8\u4eba\u7684\u80a9\u4e0a\u3002\u4f46\u662f\uff0c\u5982\u4f55\u7ad9\u5728\u5de8\u4eba\u80a9\u4e0a\u662f\u4e2a\u5934\u75bc\u7684\u95ee\u9898\uff0c\u5bf9\u4e8e\u6211\u4eec\u6700\u6280\u672f\u7684\u4eba\u800c\u8a00\uff0c\u5728\u6211\u770b\u6765\uff0c\u57fa\u672c\u4e0a\u5c31\u53ea\u6709\u4e00\u6b65\u4e00\u6b65\u722c\u4e0a\u53bb\u8fd9\u6761\u8def\uff0c\u624e\u624e\u5b9e\u5b9e\u8d70\u81ea\u5df1\u7684\u8def\u3002<\/p>\n<p>\u4f46\u662f\uff0c\u5f88\u591a\u4eba\u4ee5\u4e3a\u8ddf\u5de8\u4eba\u7167\u4e2a\u9762\uff0c\u6253\u4e2a\u62db\u547c\uff0c\u63e1\u4e2a\u624b\u5c31get\u7684\u5de8\u4eba\u7684\u8eab\u9ad8\u3002\u5b9e\u9645\u4e0a\uff0c\u5565\u90fd\u6ca1\u6709\u3002<\/p>\n<p>\u9762\u5bf9\u4e00\u4e2a\u6280\u672f\u70b9\uff0c\u5982\u679c\u4f60\u6ca1\u6709\u8ffd\u6c42\u201c\u771f\u7406\u201d\u7684\u7cbe\u795e\uff0c\u5355\u7eaf\u662f\u6b23\u7136\u63a5\u53d7\uff0c\u6ca1\u6709\u81ea\u5df1\u7684\u7591\u95ee\uff0c\u6ca1\u6709\u81ea\u5df1\u7684\u4f50\u8bc1\uff0c\u6ca1\u6709\u81ea\u5df1\u7684\u601d\u8003\u3002\u6700\u591a\u53ea\u662f\u6361\u4e86\u6f0f\uff0c\u6280\u80fd\u6700\u591a\u7167\u642c80%\u8fc7\u53bb\u3002\u56e0\u6b64\uff0c\u5b8c\u5168\u6ca1\u6709\u5fc5\u8981\u62c5\u5fc3\u8fd9\u7c7b\u4eba\u4f1a\u8d85\u8d8a\u81ea\u5df1\u3002\u4f46\u662f\uff0c\u5982\u679c\u4f60\u6562\u4e8e\u8d28\u7591\u4e0e\u601d\u8003\uff0c\u6709\u81ea\u5df1\u7684\u8bd5\u9a8c\u3001\u5b9e\u8df5\u3001\u601d\u8003\u4e0e\u603b\u7ed3\uff0c\u53d1\u73b0\u672a\u88ab\u5173\u6ce8\u7684\u7ec6\u8282\uff0c\u5b8c\u6210\u66f4\u8fdb\u4e00\u6b65\u7684\u521b\u65b0\uff0c\u606d\u559c\u4f60\uff0c\u4f60\u771f\u771f\u5207\u5207\u7ad9\u5728\u7684\u5de8\u4eba\u7684\u80a9\u4e0a\u3002<\/p>\n<p>\u5982\u679c\u4eba\u4eba\u90fd\u662f\u5982\u6b64\uff0c\u90a3\u6211\u786e\u5b9e\u8981\u62c5\u5fc3\u4e0d\u65ad\u88ab\u522b\u4eba\u8d85\u8d8a\u7684\u4e8b\u60c5\u3002\u597d\u5728\u4e2d\u56fd\u5927\u73af\u5883\u666e\u904d\u6d6e\u8e81\uff0c\u52bf\u5229\uff0c\u597d\u5927\u559c\u529f\uff0c\u6025\u529f\u8fd1\u5229\u3002\u56e0\u6b64\uff0c\u6211\u4f9d\u7136\u9ad8\u6795\u65e0\u5fe7\u5730\u5199\u7740\u81ea\u5df1\u7684\u5c0f\u6587\u7ae0\uff0c\u5206\u4eab\u7740\u81ea\u5df1\u7684\u6240\u601d\u6240\u60f3\u3002<\/p>\n<p>\u8bfb\u5230\u8fd9\u91cc\u7684\u4f60\u662f\u5e0c\u671b\u7ad9\u5728\u5de8\u4eba\u7684\u80a9\u4e0a\u5462\uff1f\u8fd8\u662f\u7ee7\u7eed\u6361\u6361\u5de8\u4eba\u6254\u4e0b\u7684\u9e21\u9aa8\u5934\u5462\uff1f<\/p>\n<p>\u5982\u679c\u4f60\u8981\u505a\u524d\u8005\uff0c\u4f60\u5e94\u8be5\u77e5\u9053\u8981\u600e\u4e48\u505a\u7684\uff1f\u5f88\u7b80\u5355\uff0c\u201c\u771f\u7406\u201d\u4e09\u90e8\u66f2\uff1a<strong>1. \u8d28\u7591<\/strong>\uff1b <strong>2. \u8bd5\u9a8c\u5b9e\u8df5<\/strong> \uff1b<strong>3. \u63d0\u51fa\u81ea\u5df1\u8ba4\u4e3a\u6b63\u786e\u7684\u89c2\u70b9<\/strong>\u3002<\/p>\n<p>\u6b22\u8fce\u8d28\u7591\u6211\u5728\u672c\u6587\u63d0\u51fa\u7684\u6280\u672f\u89c2\u70b9\uff0c\u5e76\u63d0\u51fa\u4f60\u8ba4\u4e3a\u7684\u771f\u7406\uff01<\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u5305\u542b\u811a\u672c\u884c\u4e3a\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=3886\">http:\/\/www.zhangxinxu.com\/wordpress\/?p=3886<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cpointer-events:none\u63d0\u9ad8\u9875\u9762\u6eda\u52a8\u65f6\u5019\u7684\u7ed8\u5236\u6027\u80fd\uff1f\u201d\u6ce8\u610f\u6807\u9898\u540e\u9762\u7684\u95ee\u53f7\u3002\u4e00\u822c\u8fd9\u79cd\u6807\u9898\u90fd\u8bf4\u660e\u4f5c\u8005\u8981\u5426\u5b9a\u8fd9\u4e2a\u7ed3\u8bba\u3002\u6211\u8fd9\u91cc\u662f\u5426\u5b9a\u5462\u8fd8\u662f\u5751\u5b9a\u5462\uff1f\u4e0d\u544a\u8bc9\u4f60\uff0c\u4f60\u81ea\u5df1\u53bb\u5bfb\u627e\u7b54\u6848\u3002<\/p>\n<p>\u672c\u6587\u4e0d\u5355\u7eaf\u4ecb\u7ecd\u6280\u672f\uff0c\u8fd8\u63a2\u8ba8\u4e86\u5173\u4e8e\u201c\u771f\u7406\u201d\u7684\u8bdd\u9898\uff0c\u82e5\u6709\u5174\u8da3\uff0c\u4e00\u8d77\u52a0\u5165\u8ba8\u8bba\u5427\u3002\u7528\u771f\u7406\u6765\u89e3\u51b3\u4e0e\u7814\u7a76\u6280\u672f\u95ee\u9898\u3002\u76f8\u4fe1\u672c\u6587\u7684\u5185\u5bb9\u4e0d\u4f1a\u8ba9\u4f60\u5931\u671b\u7684\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[136,898,661,322,259,321,897],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/3886"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3886"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/3886\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3886"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3886"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}