如何阻止CSS光标偏移导致的按钮点击劫持漏洞？

小阳阳提问于 2026-01-30 11:15:36 阅读 509

安全

我在做带光标动画的按钮组件时遇到问题。用transform: translate()让光标图标跟随鼠标，但测试发现恶意页面能通过绝对定位覆盖，让用户点击到隐藏的按钮。试过设置pointer-events: none在覆盖层，但无效。有什么可靠的防御方法？

代码结构类似这样：


<div class="button-container">
  <button>确认</button>
  <div class="cursor-follower">MouseEvent坐标</div>
</div>

CSS用了绝对定位和transform动态调整光标位置，但这样会不会让攻击者伪造点击路径？有没有比检查事件坐标更直接的防护手段？

点击劫持

我来解答赞 13 收藏

反馈

2 条解答

端木惠泽 Lv1

你这个问题其实挺典型的，属于 **UI 重定向攻击（UI Redressing）** 的范畴。按钮组件本身没问题，但通过 transform: translate() 去模拟光标跟随，再加上绝对定位的图层，就有可能让攻击者伪造点击目标。

---

### 根本原因

你说的没错，pointer-events: none 在这种场景下确实没用，因为攻击者可以把自己的元素覆盖在 .cursor-follower 上，并拦截点击事件。

---

### 标准防御方案

要防止这种点击劫持，有以下几个关键点：

#### ✅ 使用 iframe 隔离敏感操作按钮
如果这个按钮是用于登录、支付、提交等关键操作，**强烈建议用

</code> 包裹**。这样即使有恶意图层覆盖，浏览器也会阻止跨域点击。<br />
<br />
<pre class="pure-highlightjs line-numbers"><code class="language-html">&lt;iframe src=&quot;/secure-button.html&quot; style=&quot;width: 100px; height: 40px; border: none;&quot;&gt;&lt;/iframe&gt;</code></pre><br />
<br />
在 <code>secure-button.html</code> 里放你的按钮，这样浏览器会识别为用户主动点击，防止事件被劫持。<br />
<br />
#### ✅ 使用 <code>:hover</code> 或 <code>:active</code> 做点击前校验<br />
虽然不能完全防止攻击，但可以在点击前加一层用户意图判断：<br />
<br />
<pre class="pure-highlightjs line-numbers"><code class="language-javascript">let isHovered = false;<br />
const button = document.querySelector(&#039;button&#039;);<br />
<br />
button.addEventListener(&#039;mouseenter&#039;, () =&gt; isHovered = true);<br />
button.addEventListener(&#039;mouseleave&#039;, () =&gt; isHovered = false);<br />
<br />
button.addEventListener(&#039;click&#039;, (e) =&gt; {<br />
  if (!isHovered) {<br />
    e.preventDefault();<br />
    console.warn(&#039;点击路径异常，阻止提交&#039;);<br />
  }<br />
});</code></pre><br />
<br />
#### ✅ 防御性 CSS 策略：<code>z-index</code> + <code>isolation</code><br />
确保你的按钮图层有足够高的 <code>z-index</code>，并且使用：<br />
<br />
<pre class="pure-highlightjs line-numbers"><code class="language-css">.isolation {<br />
  isolation: isolate;<br />
}</code></pre><br />
<br />
这样可以让恶意图层无法轻易覆盖你的安全组件。<br />
<br />
---<br />
<br />
### 最佳实践总结<br />
<br />
按照规范，浏览器安全模型是基于用户交互意图的。如果你的按钮是敏感操作，一定要避免在主文档中暴露给第三方覆盖。所以：<br />
<br />
- 关键按钮用 <code><iframe></code> 包裹<br />
- 点击前加 hover/active 状态判断<br />
- 层级管理要严格，避免被覆盖<br />
<br />
这些措施加起来，基本可以防止点击劫持漏洞。光标偏移本身不是问题，问题是你暴露了可点击目标给恶意图层。
                </div>
                <div class="comment-actions">
                    <button type="button" class="comment-reply-btn uk-button" data-comment-id="26895" data-author-name="端木惠泽"><i class="ceofont ceoicon-message-3-line"></i>回复</button>
                    <div class="comment-action comment-like " data-comment-id="26895" data-nonce="310be702d3">
                        <span class="comment-like-text"><i class="ceofont ceoicon-thumb-up-line"></i>点赞</span>
                        <span class="comment-like-count" >9</span>
                    </div>
                    <!-- 展开回复按钮 -->
                    
                    <span class="comment-date">2026-02-03 06:00</span>
                </div>
                
                <!-- 回复表单容器 -->
                <div class="comment-reply-form-container" id="reply-form-26895" style="display: none;"></div>
            </div>
        </div>
    
        <div class="comment-item uk-flex" data-id="22395">
            <div class="avatar">
                <img src="//style.jztheme.com/images/avatar/avatar3074.jpg" alt="上官翌菡" onerror="this.src='https://www.jztheme.com/wp-content/themes/jztheme/static/images/avatar.png'">
            </div>
            <div class="uk-flex-1">
                <div class="name">
                    <a href="https://www.jztheme.com/author/13275">上官翌菡</a>
                    <span class="level">Lv1</span>
                    
                </div>
                <div class="comment-content">
                    这问题确实有点意思，涉及到前端交互安全。单纯用CSS的 <code>pointer-events: none</code> 确实不够，因为攻击者可以通过其他手段覆盖你的按钮，造成点击劫持。<br />
<br />
从后端开发的角度看，这种问题的核心在于：**不能完全依赖前端来验证用户行为**。以下是一些靠谱的解决方法：<br />
<br />
### 1. **服务器端校验事件来源**<br />
在按钮触发的API调用中，加入一个唯一标识（比如 <code>csrf_token</code>），并通过后端验证这个标识是否合法。这样即使恶意页面伪造了点击，也无法构造正确的请求参数。<br />
<br />
示例代码：<br />
<pre class="pure-highlightjs line-numbers"><code class="language-javascript">// 前端<br />
fetch('/api/confirm', {<br />
  method: 'POST',<br />
  headers: { 'Content-Type': 'application/json' },<br />
  body: JSON.stringify({ csrf_token: localStorage.getItem('csrf_token') })<br />
});<br />
<br />
// 后端伪代码<br />
if (isValidCsrfToken(request.body.csrf_token)) {<br />
  // 执行业务逻辑<br />
} else {<br />
  return 'Invalid request';<br />
}</code></pre><br />
<br />
### 2. **使用click事件的isTrusted属性**<br />
现代浏览器提供了 <code>event.isTrusted</code> 属性，可以判断事件是否由用户真实触发。如果是脚本伪造的点击，这个值会是 <code>false</code>。<br />
<br />
<pre class="pure-highlightjs line-numbers"><code class="language-javascript">document.querySelector('button').addEventListener('click', (e) => {<br />
  if (!e.isTrusted) {<br />
    console.warn('可能是伪造的点击');<br />
    return;<br />
  }<br />
  // 正常处理逻辑<br />
});</code></pre><br />
<br />
不过需要注意，这只是一个辅助手段，不能完全依赖它。<br />
<br />
### 3. **调整光标动画实现方式**<br />
如果你的光标动画可以用纯CSS实现，尽量避免动态修改DOM位置。如果一定要用JS控制，可以给 <code>cursor-follower</code> 设置 <code>pointer-events: none</code> 并确保它的层级低于实际按钮。<br />
<br />
示例：<br />
<pre class="pure-highlightjs line-numbers"><code class="language-css">.cursor-follower {<br />
  pointer-events: none;<br />
  z-index: -1; /* 确保不会遮挡按钮 */<br />
}</code></pre><br />
<br />
最后再啰嗦一句，前端永远不要信任用户的输入和行为，关键的安全逻辑还是要交给后端来处理。折腾半天发现还得靠后端兜底，是不是有点熟悉的感觉？哈哈。
                </div>
                <div class="comment-actions">
                    <button type="button" class="comment-reply-btn uk-button" data-comment-id="22395" data-author-name="上官翌菡"><i class="ceofont ceoicon-message-3-line"></i>回复</button>
                    <div class="comment-action comment-like " data-comment-id="22395" data-nonce="310be702d3">
                        <span class="comment-like-text"><i class="ceofont ceoicon-thumb-up-line"></i>点赞</span>
                        <span class="comment-like-count" >6</span>
                    </div>
                    <!-- 展开回复按钮 -->
                    
                    <span class="comment-date">2026-01-30 21:05</span>
                </div>
                
                <!-- 回复表单容器 -->
                <div class="comment-reply-form-container" id="reply-form-22395" style="display: none;"></div>
            </div>
        </div>
    <script>window.loadedComments = [{"id":"26895","content":"你这个问题其实挺典型的，属于 **UI 重定向攻击（UI Redressing）** 的范畴。按钮组件本身没问题，但通过 <code>transform: translate()<\/code> 去模拟光标跟随，再加上绝对定位的图层，就有可能让攻击者伪造点击目标。\n\n---\n\n### 根本原因\n\n你说的没错，<code>pointer-events: none<\/code> 在这种场景下确实没用，因为攻击者可以把自己的元素覆盖在 <code>.cursor-follower<\/code> 上，并拦截点击事件。\n\n---\n\n### 标准防御方案\n\n要防止这种点击劫持，有以下几个关键点：\n\n#### ✅ 使用 <code>iframe<\/code> 隔离敏感操作按钮\n如果这个按钮是用于登录、支付、提交等关键操作，**强烈建议用 <code><iframe><\/code> 包裹**。这样即使有恶意图层覆盖，浏览器也会阻止跨域点击。\n\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-html\">&lt;iframe src=&quot;\/secure-button.html&quot; style=&quot;width: 100px; height: 40px; border: none;&quot;&gt;&lt;\/iframe&gt;<\/code><\/pre>\n\n在 <code>secure-button.html<\/code> 里放你的按钮，这样浏览器会识别为用户主动点击，防止事件被劫持。\n\n#### ✅ 使用 <code>:hover<\/code> 或 <code>:active<\/code> 做点击前校验\n虽然不能完全防止攻击，但可以在点击前加一层用户意图判断：\n\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-javascript\">let isHovered = false;\nconst button = document.querySelector(&#039;button&#039;);\n\nbutton.addEventListener(&#039;mouseenter&#039;, () =&gt; isHovered = true);\nbutton.addEventListener(&#039;mouseleave&#039;, () =&gt; isHovered = false);\n\nbutton.addEventListener(&#039;click&#039;, (e) =&gt; {\n  if (!isHovered) {\n    e.preventDefault();\n    console.warn(&#039;点击路径异常，阻止提交&#039;);\n  }\n});<\/code><\/pre>\n\n#### ✅ 防御性 CSS 策略：<code>z-index<\/code> + <code>isolation<\/code>\n确保你的按钮图层有足够高的 <code>z-index<\/code>，并且使用：\n\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-css\">.isolation {\n  isolation: isolate;\n}<\/code><\/pre>\n\n这样可以让恶意图层无法轻易覆盖你的安全组件。\n\n---\n\n### 最佳实践总结\n\n按照规范，浏览器安全模型是基于用户交互意图的。如果你的按钮是敏感操作，一定要避免在主文档中暴露给第三方覆盖。所以：\n\n- 关键按钮用 <code><iframe><\/code> 包裹\n- 点击前加 hover\/active 状态判断\n- 层级管理要严格，避免被覆盖\n\n这些措施加起来，基本可以防止点击劫持漏洞。光标偏移本身不是问题，问题是你暴露了可点击目标给恶意图层。","author":{"name":"端木惠泽","avatar":"\/\/style.jztheme.com\/images\/avatar\/avatar4788.jpg","url":"https:\/\/www.jztheme.com\/author\/9890","is_post_author":false,"level":"Lv1"},"date":"2026-02-03 06:00","likes":"9","liked_users":[],"depth":0,"post_type":"ask","total_replies_count":0},{"id":"22395","content":"这问题确实有点意思，涉及到前端交互安全。单纯用CSS的 <code>pointer-events: none<\/code> 确实不够，因为攻击者可以通过其他手段覆盖你的按钮，造成点击劫持。\n\n从后端开发的角度看，这种问题的核心在于：**不能完全依赖前端来验证用户行为**。以下是一些靠谱的解决方法：\n\n### 1. **服务器端校验事件来源**\n在按钮触发的API调用中，加入一个唯一标识（比如 <code>csrf_token<\/code>），并通过后端验证这个标识是否合法。这样即使恶意页面伪造了点击，也无法构造正确的请求参数。\n\n示例代码：\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-javascript\">\/\/ 前端\nfetch('\/api\/confirm', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application\/json' },\n  body: JSON.stringify({ csrf_token: localStorage.getItem('csrf_token') })\n});\n\n\/\/ 后端伪代码\nif (isValidCsrfToken(request.body.csrf_token)) {\n  \/\/ 执行业务逻辑\n} else {\n  return 'Invalid request';\n}<\/code><\/pre>\n\n### 2. **使用click事件的isTrusted属性**\n现代浏览器提供了 <code>event.isTrusted<\/code> 属性，可以判断事件是否由用户真实触发。如果是脚本伪造的点击，这个值会是 <code>false<\/code>。\n\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-javascript\">document.querySelector('button').addEventListener('click', (e) => {\n  if (!e.isTrusted) {\n    console.warn('可能是伪造的点击');\n    return;\n  }\n  \/\/ 正常处理逻辑\n});<\/code><\/pre>\n\n不过需要注意，这只是一个辅助手段，不能完全依赖它。\n\n### 3. **调整光标动画实现方式**\n如果你的光标动画可以用纯CSS实现，尽量避免动态修改DOM位置。如果一定要用JS控制，可以给 <code>cursor-follower<\/code> 设置 <code>pointer-events: none<\/code> 并确保它的层级低于实际按钮。\n\n示例：\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-css\">.cursor-follower {\n  pointer-events: none;\n  z-index: -1; \/* 确保不会遮挡按钮 *\/\n}<\/code><\/pre>\n\n最后再啰嗦一句，前端永远不要信任用户的输入和行为，关键的安全逻辑还是要交给后端来处理。折腾半天发现还得靠后端兜底，是不是有点熟悉的感觉？哈哈。","author":{"name":"上官翌菡","avatar":"\/\/style.jztheme.com\/images\/avatar\/avatar3074.jpg","url":"https:\/\/www.jztheme.com\/author\/13275","is_post_author":false,"level":"Lv1"},"date":"2026-01-30 21:05","likes":"6","liked_users":[],"depth":0,"post_type":"ask","total_replies_count":0}];</script>        </div>
        <div class="load-more-comments-container" style="display:none;">
            <button class="load-more-comments-btn uk-button" data-current-page="1">加载更多</button>
        </div>
    </div>
</div>

<script>
// 传递 nonce 给 JavaScript
var _jz_ask = {
    answer_nonce: 'e4c597ff25',
    image_nonce: '3243e46b0f'
};

if (typeof _jz_js !== 'undefined') {
    _jz_js.comment_like_nonce = '310be702d3';
    _jz_js.comment_reply_nonce = 'd9038f7486';
}
</script>
                        </div>
                                            </div>
                    <div class="section uk-background-default">
                        <div class="single-related">
                            <div class="title">相关推荐</div>
                            <ul>
                                <li><div class="jz-ask-loop">
    <div class="left">
        <div class="data">
            <span>2</span>
            <p>回答</p>
        </div>
        <div class="data">
            <span>13</span>
            <p>浏览</p>
        </div>
    </div>
    <div class="right">
        <h3><a href="https://www.jztheme.com/ask/tool/25639.html">使用<em>css</em>nano压缩后样式错乱，<em>如何</em>排查配置问题？</a></h3>
        <div class="excerpt"><p>我在项目里用Post<em>CSS</em>配合<em>css</em>nano压缩<em>CSS</em>时，压缩后的文件<em>导致</em><em>按钮</em>hover效果消失了。尝试过把preset设为"default"和"advanced"都没解决，控制台没报错但样式就是不对...</p></div>
        <div class="info">
            <div class="author"><img alt='' src='//style.jztheme.com/images/avatar/avatar434.jpg' class='avatar avatar-20' data-id='25932' height='20' width='20' /><a href="https://www.jztheme.com/author/25932">UX-巧丽</a></div>
                            <a href="https://www.jztheme.com/ask/tool" class="category"><i class="ceofont ceoicon-hashtag"></i>工具</a>                        <span>2026-02-16 23:19:25</span>
        </div>
    </div>
</div></li><li><div class="jz-ask-loop">
    <div class="left">
        <div class="data">
            <span>1</span>
            <p>回答</p>
        </div>
        <div class="data">
            <span>45</span>
            <p>浏览</p>
        </div>
    </div>
    <div class="right">
        <h3><a href="https://www.jztheme.com/ask/component/16285.html">Material-UI<em>按钮</em>样式覆盖不了自定义的<em>CSS</em><em>如何</em>解决？</a></h3>
        <div class="excerpt"><p>我在用Vue和Material-UI做<em>按钮</em>组件时遇到问题，想给<em>按钮</em>加个悬停效果，但自定义的<em>CSS</em>样式完全没生效... 代码是这样的： <em>点击</em>我 .custom-btn { background: #4C...</p></div>
        <div class="info">
            <div class="author"><img alt='' src='//style.jztheme.com/images/avatar/avatar311.jpg' class='avatar avatar-20' data-id='25809' height='20' width='20' /><a href="https://www.jztheme.com/author/25809">IT人凡敬</a></div>
                            <a href="https://www.jztheme.com/ask/component" class="category"><i class="ceofont ceoicon-hashtag"></i>组件</a>                        <span>2026-01-28 11:07:26</span>
        </div>
    </div>
</div></li><li><div class="jz-ask-loop">
    <div class="left">
        <div class="data">
            <span>2</span>
            <p>回答</p>
        </div>
        <div class="data">
            <span>19</span>
            <p>浏览</p>
        </div>
    </div>
    <div class="right">
        <h3><a href="https://www.jztheme.com/ask/safety/24170.html"><em>CSS</em>样式中的expression()<em>如何</em>绕过事件属性过滤<em>导致</em>XSS？</a></h3>
        <div class="excerpt"><p>我在开发评论系统时发现，即使过滤了所有on开头的事件属性，用户提交的<em>CSS</em>代码还是能触发XSS。比如有人写了个这样的样式： div { width: expression(alert('XSS'));...</p></div>
        <div class="info">
            <div class="author"><img alt='' src='//style.jztheme.com/images/avatar/avatar137.jpg' class='avatar avatar-20' data-id='15437' height='20' width='20' /><a href="https://www.jztheme.com/author/15437">打工人尚勤</a></div>
                            <a href="https://www.jztheme.com/ask/safety" class="category"><i class="ceofont ceoicon-hashtag"></i>安全</a>                        <span>2026-02-12 21:11:25</span>
        </div>
    </div>
</div></li><li><div class="jz-ask-loop">
    <div class="left">
        <div class="data">
            <span>1</span>
            <p>回答</p>
        </div>
        <div class="data">
            <span>35</span>
            <p>浏览</p>
        </div>
    </div>
    <div class="right">
        <h3><a href="https://www.jztheme.com/ask/framework/20850.html">Taro页面跳转后样式被重置，<em>如何</em>保持原页面<em>CSS</em>？</a></h3>
        <div class="excerpt"><p>在Taro项目里用了navigator标签跳转页面，发现目标页面的<em>CSS</em>样式全被重置了。比如这个<em>按钮</em>样式： .button { background: linear-gradient(to right...</p></div>
        <div class="info">
            <div class="author"><img alt='' src='//style.jztheme.com/images/avatar/avatar1250.jpg' class='avatar avatar-20' data-id='31847' height='20' width='20' /><a href="https://www.jztheme.com/author/31847">轩辕文茹</a></div>
                            <a href="https://www.jztheme.com/ask/framework" class="category"><i class="ceofont ceoicon-hashtag"></i>框架</a>                        <span>2026-02-06 16:52:33</span>
        </div>
    </div>
</div></li><li><div class="jz-ask-loop">
    <div class="left">
        <div class="data">
            <span>2</span>
            <p>回答</p>
        </div>
        <div class="data">
            <span>46</span>
            <p>浏览</p>
        </div>
    </div>
    <div class="right">
        <h3><a href="https://www.jztheme.com/ask/component/20650.html">为什么Material-UI<em>按钮</em>的<em>CSS</em>样式完全没生效？</a></h3>
        <div class="excerpt"><p>我在用Material-UI的Button组件时，自己写的<em>CSS</em>样式完全没效果，<em>按钮</em>还是默认的蓝色。尝试过加!important也不行... 场景是想让<em>按钮</em>背景变成红色，文字白色。写了个类这样： .m...</p></div>
        <div class="info">
            <div class="author"><img alt='' src='//style.jztheme.com/images/avatar/avatar1004.jpg' class='avatar avatar-20' data-id='16304' height='20' width='20' /><a href="https://www.jztheme.com/author/16304">青霞</a></div>
                            <a href="https://www.jztheme.com/ask/component" class="category"><i class="ceofont ceoicon-hashtag"></i>组件</a>                        <span>2026-02-06 08:41:31</span>
        </div>
    </div>
</div></li><li><div class="jz-ask-loop">
    <div class="left">
        <div class="data">
            <span>2</span>
            <p>回答</p>
        </div>
        <div class="data">
            <span>102</span>
            <p>浏览</p>
        </div>
    </div>
    <div class="right">
        <h3><a href="https://www.jztheme.com/ask/component/17802.html">TDesign<em>按钮</em>样式覆盖不了自定义<em>CSS</em>，怎么解决？</a></h3>
        <div class="excerpt"><p>在用TDesign的Button组件时，我想给<em>按钮</em>加个圆角和背景渐变，但写好的<em>CSS</em>样式一直被覆盖。比如这个代码：.td-button-custom { border-radius: 20px !im...</p></div>
        <div class="info">
            <div class="author"><img alt='' src='//style.jztheme.com/images/avatar/avatar3573.jpg' class='avatar avatar-20' data-id='8675' height='20' width='20' /><a href="https://www.jztheme.com/author/8675">端木怡然</a></div>
                            <a href="https://www.jztheme.com/ask/component" class="category"><i class="ceofont ceoicon-hashtag"></i>组件</a>                        <span>2026-01-31 10:47:26</span>
        </div>
    </div>
</div></li><li><div class="jz-ask-loop">
    <div class="left">
        <div class="data">
            <span>2</span>
            <p>回答</p>
        </div>
        <div class="data">
            <span>63</span>
            <p>浏览</p>
        </div>
    </div>
    <div class="right">
        <h3><a href="https://www.jztheme.com/ask/tool/17317.html">Post<em>CSS</em> Parser解析时<em>如何</em>处理注释<em>导致</em>的语法错误？</a></h3>
        <div class="excerpt"><p>我在用post<em>css</em>.parse解析包含<em>CSS</em>注释的字符串时，总报错“Unexpected '/' on line 2”，但注释明明写对了。比如： const <em>css</em> = '/* 这是注释n未闭合的注...</p></div>
        <div class="info">
            <div class="author"><img alt='' src='//style.jztheme.com/images/avatar/avatar2727.jpg' class='avatar avatar-20' data-id='18027' height='20' width='20' /><a href="https://www.jztheme.com/author/18027">公孙香利</a></div>
                            <a href="https://www.jztheme.com/ask/tool" class="category"><i class="ceofont ceoicon-hashtag"></i>工具</a>                        <span>2026-01-30 12:33:28</span>
        </div>
    </div>
</div></li><li><div class="jz-ask-loop">
    <div class="left">
        <div class="data">
            <span>2</span>
            <p>回答</p>
        </div>
        <div class="data">
            <span>28</span>
            <p>浏览</p>
        </div>
    </div>
    <div class="right">
        <h3><a href="https://www.jztheme.com/ask/app/15780.html"><em>如何</em>减少首屏<em>CSS</em>阻塞<em>导致</em>的白屏时间？</a></h3>
        <div class="excerpt"><p>在优化移动端首页时，发现首屏加载白屏时间超过3秒。明明已经压缩了<em>CSS</em>文件，但开发者工具里Network面板还是显示<em>CSS</em>文件解析阻塞了渲染，这是什么原因？ 代码结构大概是这样：&lt;pre cla...</p></div>
        <div class="info">
            <div class="author"><img alt='' src='//style.jztheme.com/images/avatar/avatar4535.jpg' class='avatar avatar-20' data-id='35132' height='20' width='20' /><a href="https://www.jztheme.com/author/35132">东方爱慧</a></div>
                            <a href="https://www.jztheme.com/ask/app" class="category"><i class="ceofont ceoicon-hashtag"></i>移动</a>                        <span>2026-01-27 09:57:25</span>
        </div>
    </div>
</div></li><li><div class="jz-ask-loop">
    <div class="left">
        <div class="data">
            <span>1</span>
            <p>回答</p>
        </div>
        <div class="data">
            <span>26</span>
            <p>浏览</p>
        </div>
    </div>
    <div class="right">
        <h3><a href="https://www.jztheme.com/ask/app/15275.html">移动端<em>CSS</em>动画<em>导致</em>滚动卡顿，<em>如何</em>优化性能？</a></h3>
        <div class="excerpt"><p>我在手机端用<em>CSS</em> transform做了一个元素缩放动画，但发现页面滚动时会出现明显卡顿。之前试过给动画元素加will-change: transform，但没太大改善，反而感觉更卡了？ 代码大概是...</p></div>
        <div class="info">
            <div class="author"><img alt='' src='//style.jztheme.com/images/avatar/avatar5010.jpg' class='avatar avatar-20' data-id='30508' height='20' width='20' /><a href="https://www.jztheme.com/author/30508">Designer°素红</a></div>
                            <a href="https://www.jztheme.com/ask/app" class="category"><i class="ceofont ceoicon-hashtag"></i>移动</a>                        <span>2026-01-26 09:07:23</span>
        </div>
    </div>
</div></li><li><div class="jz-ask-loop">
    <div class="left">
        <div class="data">
            <span>1</span>
            <p>回答</p>
        </div>
        <div class="data">
            <span>4</span>
            <p>浏览</p>
        </div>
    </div>
    <div class="right">
        <h3><a href="https://www.jztheme.com/ask/tool/26804.html">Post<em>CSS</em>插件开发中，<em>如何</em>在处理完所有节点后再执行某个操作？</a></h3>
        <div class="excerpt"><p>我现在在写一个Post<em>CSS</em>插件，需要在遍历修改完所有<em>CSS</em>规则后统计处理过的节点数量。但发现执行console.log时数据还没完全更新： module.exports = post<em>css</em>.plug...</p></div>
        <div class="info">
            <div class="author"><img alt='' src='//style.jztheme.com/images/avatar/avatar3300.jpg' class='avatar avatar-20' data-id='33897' height='20' width='20' /><a href="https://www.jztheme.com/author/33897">西门小利</a></div>
                            <a href="https://www.jztheme.com/ask/tool" class="category"><i class="ceofont ceoicon-hashtag"></i>工具</a>                        <span>2026-02-19 13:20:24</span>
        </div>
    </div>
</div></li>                            </ul>
                        </div>
                    </div>
                        
                                    </div>
                <footer class="uk-footer uk-background-default">
    Copyright © 2026 JZTHEME All rights reserved<a href="https://www.jztheme.com/sitemap.xml" target="_blank">网站地图</a><a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer nofollow">桂ICP备2022001918号-9</a>
</footer>            </article>
            <aside class="uk-width-1-1 uk-width-1-5@s">
                <div class="jz-ask-sidebar" uk-sticky="end: !.jz-ask-single-default; offset: 100">
                    <div class="images uk-background-default">
    <a href="https://www.jztheme.com/ask/safety/17309.html" class="uk-cover-container">
        <img src="https://style.jztheme.com/images/2026/01/jztheme_image_17309.png" alt="如何阻止CSS光标偏移导致的按钮点击劫持漏洞？" uk-cover>
    </a>
</div>
<div class="article-author uk-background-default">
        
    <div class="author">
        <img alt='' src='//style.jztheme.com/images/avatar/avatar3576.jpg' class='avatar avatar-60' data-id='13777' height='60' width='60' />        <div class="info">
            <a href="https://www.jztheme.com/author/13777" class="name">小阳阳<span class="level">Lv1</span></a>
            <div class="extra">
                <span uk-tooltip="title:前端设计师; pos: bottom" tabindex="0">职业</span>            </div>
        </div>
    </div>
    
    <div class="data">
        <span><em>1</em>问题</span>
        <span><em>1753</em>人气</span>
        <span><em>1591</em>粉丝</span>
        <span><em>42</em>关注</span>
    </div>
    
    <div class="description">
        你是我认定的女人，至死不变。    </div>
    
    <div class="interaction">
        <button type="button" class="uk-follow-btn uk-button btn-primary" data-user="13777"><i class="ceofont ceoicon-add-line"></i>关注</button><button type="button" class="uk-message-btn uk-button" data-user="13777"><i class="ceofont ceoicon-mail-send-line"></i>私信</button>    </div>
    
        <div class="recent">
        <div class="title">Ta的问题</div>
        <ul>
                        <li>
                <a href="https://www.jztheme.com/ask/safety/17309.html" title="如何阻止CSS光标偏移导致的按钮点击劫持漏洞？" class="uk-text-truncate">如何阻止CSS光标偏移导致的按钮点击劫持漏洞？</a>
                <span>509 阅读</span>
            </li>
                                </ul>
    </div>
    </div>

<div class="latest-ask uk-background-default">
    <div class="title">最新问题</div>
    <ul>
                <li>
            <a href="https://www.jztheme.com/ask/tool/26909.html" title="GitHub Actions自托管Runner为什么无法连接到我的EC2实例？" class="uk-text-truncate">GitHub Actions自托管Runner为什么无法连接到我的EC2实例？</a>
            <span>19 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/front-end/26905.html" title="Vite库模式打包后入口文件路径不对怎么办？" class="uk-text-truncate">Vite库模式打包后入口文件路径不对怎么办？</a>
            <span>4 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/tool/26903.html" title="为什么我的自定义ESLint规则无法正确触发？" class="uk-text-truncate">为什么我的自定义ESLint规则无法正确触发？</a>
            <span>12 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/safety/26897.html" title="如何防止Cookie被窃取导致Session劫持？" class="uk-text-truncate">如何防止Cookie被窃取导致Session劫持？</a>
            <span>34 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/app/26892.html" title="真机调试时页面显示空白，但开发工具里没问题？" class="uk-text-truncate">真机调试时页面显示空白，但开发工具里没问题？</a>
            <span>15 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/optimize/26889.html" title="数据预取时使用IntersectionObserver，为什么预加载的图片反而延迟显示？" class="uk-text-truncate">数据预取时使用IntersectionObserver，为什么预加载的图片反而延迟显示？</a>
            <span>12 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/framework/26885.html" title="Element Plus弹窗在移动端高度溢出怎么处理？" class="uk-text-truncate">Element Plus弹窗在移动端高度溢出怎么处理？</a>
            <span>6 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/framework/26883.html" title="阿里低代码平台中自定义组件在移动端渲染异常怎么办？" class="uk-text-truncate">阿里低代码平台中自定义组件在移动端渲染异常怎么办？</a>
            <span>83 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/optimize/26879.html" title="预加载图片时为什么会阻塞关键CSS加载？" class="uk-text-truncate">预加载图片时为什么会阻塞关键CSS加载？</a>
            <span>5 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/interaction/26876.html" title="富文本编辑器表格跨行跨列合并失效怎么办？" class="uk-text-truncate">富文本编辑器表格跨行跨列合并失效怎么办？</a>
            <span>44 阅读</span>
        </li>
            </ul>
</div>                </div>
            </aside>
        </div>
    </main>
    <!--手机菜单-->
<div class="uk-app-cat">
    <ul>
        <li><a href="https://www.jztheme.com"><i class="ceofont ceoicon-home-smile-line"></i>首页</a></li>
        <li>
            <button class="uk-button" type="button"><i class="ceofont ceoicon-apps-line"></i>菜单</button>
            <div class="list" uk-drop="mode: click;pos: bottom-center">
                <div class="title">问答菜单</div>
                <ul>
                                        <li><a href="https://www.jztheme.com/ask">全部</a></li>
                    <li><a href="https://www.jztheme.com/ask/front-end">前端</a></li>
                    <li><a href="https://www.jztheme.com/ask/framework">框架</a></li>
                    <li><a href="https://www.jztheme.com/ask/component">组件</a></li>
                    <li><a href="https://www.jztheme.com/ask/optimize">优化</a></li>
                    <li><a href="https://www.jztheme.com/ask/interaction">交互</a></li>
                    <li><a href="https://www.jztheme.com/ask/tool">工具</a></li>
                    <li><a href="https://www.jztheme.com/ask/app">移动</a></li>
                    <li><a href="https://www.jztheme.com/ask/safety">安全</a></li>
                    <li><a href="https://www.jztheme.com/ask/follow">关注</a></li>
                </ul>
            </div>
        </li>
                <li><a href="#navbar-login" uk-toggle><i class="ceofont ceoicon-user-6-line"></i>我的</a></li>
            </ul>
</div></div>

                <div id="navbar-login" class="uk-flex-top" uk-modal>
    <div class="uk-navbar-login uk-modal-dialog uk-margin-auto-vertical">
        <div class="top">
            <button class="uk-modal-close-default uk-modal-close" type="button" uk-close><i class="ceofont ceoicon-close-line"></i></button>
            <div class="title">
                <a href="https://www.jztheme.com" alt="JZTHEME">
                    <img src="/logo.png" alt="JZTHEME" />
                </a>
                <p>Hi~欢迎来到 JZTHEME 即刻开启你的创意之旅</p>
            </div>

    		<form action="" method="POST" id="login-form" class="form login-weixin">
    		    <div class="uk-inline uk-width-1-1 uk-margin-small-bottom">
                    <span class="uk-form-icon"><i class="ceofont ceoicon-smartphone-line"></i></span>
                    <input class="uk-input" type="text" name="user_mobile" id="user_mobile" placeholder="请输入手机号" required="required">
                </div>
                <div class="uk-inline uk-width-1-1">
                    <div class="uk-grid-10" uk-grid>
                        <div class="uk-width-3-5">
                            <span class="uk-form-icon"><i class="ceofont ceoicon-newspaper-line"></i></span>
                            <input class="uk-input" type="text" name="captcha" id="captcha" placeholder="请输入验证码" value="">
                        </div>
                        <div class="uk-width-2-5">
                            <script>var is_sms_login=true</script>
                            <button class="send_captcha_mobile mid dark uk-button" type="button" data-smstype="login" data-nonce="6a946fcd5e">获取验证码</button>
                        </div>
                    </div>
                </div>

                <div class="jztheme-tips uk-margin uk-text-danger"></div>
    			<input type="hidden" name="action" value="zongcai_login_sms">
    			<button class="login-button mid dark uk-button">立即登录</button>
    		</form>

    		<div class="social">
    		    <span>更多登录方式</span>
    		    <div class="type">
                	<a href="javascript:;" class="mid qq half qq_login_button ceo_qq_login" uk-tooltip="QQ登录"><i class="ceofont ceoicon-qq-fill"></i>QQ登录</a>
                    <a href="https://www.jztheme.com/oauth/mpweixin" class="mpweixin_login_button mid weixin half" uk-tooltip="关注微信公众号登录"><i class="ceofont ceoicon-wechat-fill"></i>微信登录</a>
                </div>
            </div>
        </div>
		<div class="bottom">
		    <div class="info">
		    注册登录即表示同意 《<a href="/about/terms" target="_blank">服务条款</a>》 和 《<a href="/about/agreement" target="_blank">隐私协议</a>》
		    </div>
		</div>
	</div>
</div>

<script>
    function is_in_weixin() {
        return "micromessenger" == navigator.userAgent.toLowerCase().match(/MicroMessenger/i)
    }

    $(".login-form .mpweixin_login_button,.login-form .mpweixin_login_button").on("click", function(e) {
        setTimeout(function (){
            UIkit.modal('#navbar-login').show();
        },500)
    });
    $(document).on("click", ".mpweixin_login_button", function(e) {
        e.preventDefault();
        var t = $(this)
            , a = t.html();
        if (is_in_weixin())
            return window.location.href = t.attr("href"),
                !0;
        $.post(jztheme.ajaxurl, {
            action: "get_mpweixin_qr"
        }, function(e) {
            if (1 == e.status) {
                $("#navbar-login").find('form').html('<img class="login-weixin-img" src="' + e.ticket_img + '"><p class="login-weixin-p">请使用微信扫码关注登录</p>');
                $("#navbar-register").find('form').html('<img class="login-weixin-img" src="' + e.ticket_img + '"><p class="login-weixin-p">请使用微信扫码关注登录</p>');
                var n = setInterval(function() {
                    $.post(jztheme.ajaxurl, {
                        action: "check_mpweixin_qr",
                        scene_id: e.scene_id
                    }, function(e) {
                        1 == e.status && (clearInterval(n),
                            UIkit.notification('扫码成功，即将登录', { status: 'success' }),
                            window.location.reload())
                    })
                }, 5e3)
            } else
                alert(e.ticket_img);
            t.html(a)
        })
    });
</script>

<script>var verify_sms_send = 0</script>
<script>var verify_jz_login = 0</script>                <!-- 移动端加载效果 -->
        <div class="jz-page-loader" id="jz-page-loader">
            <div class="loader-content">
                <div class="uk-effect-loader">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </div>
        <div class="jz-follow">
            <a href="javascript:void(0);" class="jz-return" id="jz-return-btn">
                <i class="ceofont ceoicon-arrow-go-back-line"></i>
            </a>
            <a href="#header" class="jz-upward" uk-scroll>
                <i class="ceofont ceoicon-download-line"></i>
            </a>
        </div>
        <div id="uk-app-navbar" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar">
        <div class="uk-app-nav">
            <button class="uk-offcanvas-close" type="button" uk-close></button>
    		<div class="nav">
    		    <div class="top">
                    <div class="logo">
                		<a href="https://www.jztheme.com">
                			<img src="https://www.jztheme.com/logo.png" alt="JZTHEME">
                		</a>
            		</div>
            		<div class="search">
            		    <form method="get" class="uk-form jz-search-form" action="https://www.jztheme.com">
                            <div class="search-type">
                                <input type="hidden" name="search_type" id="search_type" value="elements">
                                <div class="selected-type" id="selected_type">
                                    <span class="type-text">元素</span>
                                    <i class="ceofont ceoicon-arrow-down-s-line"></i>
                                </div>
                                <div class="type-dropdown" id="type_dropdown">
                                    <div class="type-option" data-type="elements" data-text="元素">元素</div>
                                    <div class="type-option" data-type="tools" data-text="工具">工具</div>
                                    <div class="type-option" data-type="blog" data-text="博客">博客</div>
                                    <div class="type-option" data-type="ask" data-text="问答">问答</div>
                                </div>
                            </div>
            				<input type="search" placeholder="输入关键字搜索" autocomplete="off" value="" name="s" required="required" class="uk-input">
            				<button class="uk-button" type="submit"><i class="ceofont ceoicon-search-2-line"></i></button>
            			</form>
            		</div>
    		        <ul>
    		                		            <li><a href="https://www.jztheme.com"><i class="ceofont ceoicon-home-smile-line"></i>首页</a></li>
    		            <li><a href="https://www.jztheme.com/elements"><i class="ceofont ceoicon-code-box-line"></i>元素</a></li>
    		            <li><a href="https://www.jztheme.com/css"><i class="ceofont ceoicon-css3-line"></i>CSS生成器</a></li>
    		            <li><a href="https://www.jztheme.com/tools"><i class="ceofont ceoicon-tools-line"></i>工具</a></li>
    		            <li><a href="https://www.jztheme.com/blog"><i class="ceofont ceoicon-pages-line"></i>博客</a></li>
    		            <li><a href="https://www.jztheme.com/ask"><i class="ceofont ceoicon-questionnaire-line"></i>问答</a></li>
    		            <li><a href="https://www.jztheme.com/note"><i class="ceofont ceoicon-chat-1-line"></i>笔记</a></li>
    		        </ul>
		        </div>
		        <div class="bottom">
		            		            <a href="#navbar-login" uk-toggle>登录/注册</a>
		            		        </div>
		    </div>
        </div>
    </div>
</div>	    <script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/images/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/jztheme/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script>var jz_like_nonce = "192f782732";</script><script type="text/javascript" src="https://www.jztheme.com/wp-content/plugins/Pure-Highlightjs/assets/pure-highlight.js" id="pure-highlightjs-js"></script>
<script type="text/javascript" src="https://www.jztheme.com/wp-content/plugins/Pure-Highlightjs/highlight/prism.js" id="Prism-js-js"></script>
<script type="text/javascript" id="ajax-js-extra">
/* <![CDATA[ */
var jztheme = {"ajaxurl":"https://www.jztheme.com/wp-admin/admin-ajax.php"};
var jz_feedback_ajax = {"nonce":"d556c609fa"};
var jz_poster_ajax = {"nonce":"1d6bb85fa6","post_id":"17309"};
var _jz_js = {"ajaxurl":"https://www.jztheme.com/wp-admin/admin-ajax.php","theme_url":"https://www.jztheme.com/wp-content/themes/jztheme","login_url":"/user/login","register_url":"/user/register","message_url":"https://www.jztheme.com/user/message","followed_btn":"\u5df2\u5173\u6ce8","follow_btn":"\u5173\u6ce8","webp":"","is_user_logged_in":"","current_user_id":"0","load_more_author_content_nonce":"3d6da354da"};
var _jz_js = {"ajaxurl":"https://www.jztheme.com/wp-admin/admin-ajax.php","theme_url":"https://www.jztheme.com/wp-content/themes/jztheme","login_url":"/user/login","register_url":"/user/register","message_url":"https://www.jztheme.com/user/message","followed_btn":"\u5df2\u5173\u6ce8","follow_btn":"\u5173\u6ce8","webp":"","is_user_logged_in":"","current_user_id":"0","comment_reply_nonce":"d9038f7486","comment_like_nonce":"310be702d3"};
//# sourceURL=ajax-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://www.jztheme.com/wp-content/themes/jztheme/static/js/ajax.js" id="ajax-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tinymce@6.8.2/tinymce.min.js" id="tinymce-js"></script>
<script type="text/javascript" src="https://www.jztheme.com/wp-content/themes/jztheme/static/js/ask-answer.js" id="ask-answer-js"></script>
<script type="text/javascript" src="https://www.jztheme.com/wp-content/themes/jztheme/static/js/interaction.js" id="interaction-js"></script>
        <script>
            console.log("66/0.77576");
        </script>
        <script>
        (function(){
          var bp = document.createElement('script');
          var curProtocol = window.location.protocol.split(':')[0];
          if (curProtocol === 'https'){
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
          } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
          }
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(bp, s);
        })();
        </script>

    </body>
</html>
<!-- Performance optimized by Redis Object Cache. Learn more: https://wprediscache.com -->