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