| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- /* 模拟取消原因对话框的样式 */
- .cancel-reason-option {
- padding: 12px 16px;
- border: 1px solid #d1d5db;
- border-radius: 6px;
- cursor: pointer;
- transition: all 0.2s;
- background: white;
- margin-bottom: 8px;
- }
- .cancel-reason-option:hover {
- background-color: #f9fafb;
- }
- .cancel-reason-option.selected {
- border-color: #3b82f6;
- background-color: #eff6ff;
- }
- /* 检查是否有任何可能阻止点击的样式 */
- * {
- box-sizing: border-box;
- }
- body {
- font-family: sans-serif;
- padding: 20px;
- }
- </style>
- </head>
- <body>
- <h2>测试取消原因对话框按钮点击</h2>
- <div class="cancel-reason-option" onclick="console.log('点击了: 我不想买了')">
- 我不想买了
- </div>
- <div class="cancel-reason-option" onclick="console.log('点击了: 信息填写错误，重新下单')">
- 信息填写错误，重新下单
- </div>
- <div class="cancel-reason-option" onclick="console.log('点击了: 商家缺货')">
- 商家缺货
- </div>
- <div class="cancel-reason-option" onclick="console.log('点击了: 价格不合适')">
- 价格不合适
- </div>
- <p>点击上面的选项，检查浏览器控制台是否有输出</p>
- <script>
- // 添加点击事件监听器
- const options = document.querySelectorAll('.cancel-reason-option');
- options.forEach(option => {
- option.addEventListener('click', function() {
- console.log('事件监听器触发:', this.textContent);
- // 移除其他选项的选中状态
- options.forEach(opt => opt.classList.remove('selected'));
- // 添加当前选项的选中状态
- this.classList.add('selected');
- });
- });
- </script>
- </body>
- </html>
|
