|
|
@@ -0,0 +1,73 @@
|
|
|
+<!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>
|
yourname