JavaScript中的confirm方法点击取消无效(和点击确认效果相同)

最新推荐文章于 2023-05-26 16:53:02 发布

「已注销」

最新推荐文章于 2023-05-26 16:53:02 发布

阅读量3.8k

点赞数 4

分类专栏：前端文章标签： HTML 前端 JavaScript 确认取消

本文链接：https://blog.youkuaiyun.com/qq_40723748/article/details/99338221

版权

前端专栏收录该内容

14 篇文章

订阅专栏

最近在做的一个内容管理（CMS）系统中涉及到了内容的删除，点击删除项目后，由JavaScript的confirm()方法确认是否删除。然而点击”取消“之后，内容仍被删除。由于对JavaScript不是很了解，于是Google了一下，找到了问题所在。

原来的前端是这样写的：

<td><a href="/jeeadmin/jeecms/content/delete.do?id=${myContent.contentId}" onclick="confirm('确定要删除吗?')">删除</a></td>

修改后问题没有了，修改后的前端HTML为：

<td><a href="/jeeadmin/jeecms/content/delete.do?id=${myContent.contentId}" onclick="var toDelete = (confirm('确定要删除吗?')); return toDelete ">删除</a></td>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

JavaScript基础

ccyzq的博客

12-22

3600

文章目录前言一、JavaScript简介二、JavaScript使用形式三、基本语法四、运算符五、流程控制六、函数前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。一、JavaScript简介二、JavaScript使用形式三、基本语法四、运算符五、流程控制六、函数 ...

JavaScript 数组对象方法 ## **3.拼接arr.join(‘分隔符‘)**

qq_43944285的博客

05-03

1175

内置对象:数组对象方法 1.连接数组arr.concat(数组) //声明数组 let arr = [10,20,30] //(1) arr.concat(数组) ：把两个数组连接成一个数组 //应用场景：一般用于长列表(下一页),不断往后面拼接数组 let newArr = arr.concat([40,50]) console.log(newArr)//[10,20,30,40,50] 2.翻转数组arr.reve

2 条评论您还未登录，请先登录后发表或查看评论

confirm()点击取消无效

hua_wuse的博客

08-23

1912

关于confirm()点击取消无效原因： confirm()的有两个返回点击确认：是返回true 点击取消：是返回false 如果confirm()后面不跟return false;，就算点击取消也是执行确认按钮代码如下： <script type="text/javascript"> $(function (){ //给【删除】绑定单击事件 $("a.deleteItem").click(function (){ return confirm("你确定要删除【

js confirm 点击取消时什么也不做

08-03

9663

点击保存时，弹出框：确定修改此信息吗？点击“确定”，提交表单点击“取消”，什么也不做，停留在原页面（注意加了：return false） function editinfo() { if(confirm("确定修改此信息吗？")){ method =

关于javascript confirm 取消依然能提交表单的问题

vivian的专栏

03-08

4905

<br />大家在实际工作中用js的时候可能会遇到这种情况：<br /> confirm()弹出的对话框，当用户点击“取消”的时候，表单仍然提交的问题；<br /> 一般来说这种问题产生的原因有一下几点：<br /> 1：在判断comfirm（）为“取消”的时候，我们没有return false；即：<br /> if(!comfirm("确定要提交表单吗？")){<br /> return false;<br /> }<br /><br /> 2：还有一种情况，当用户点击“取消”

Element-ui Popconfirm气泡确认框的确认及取消事件不生效

HTML5_student的博客

04-11

2129

给组件绑定@confirm="confirm"时，发现点击确定按钮时，并不能触发confirm事件。实际应该绑定的是onConfirm事件和onCancel事件

＜a＞标签中的confirm方法点击取消无效的问题

罗格的博客

07-17

1431

原本的写法 <a href="${ctx}/rgsd/common" onclick="return confirm('该操作会将总单下所有数据 ( 包含审核通过 ) 全部退单,确认执行? ')" class=" bbutton2 fl">总单全部退单</a> 用下面写法可以使取消按钮不请求到后台： <a href="javascript:void(0);" onclick = "return (confirm('该操作会将总单下所有数据 ( 包含审核通过 ) 全

JavaScript 总结

sumatch的博客

07-01

667

JavaScript

JavaScript高级程序设计第12章---BOM浏览器对象模型

weixin_40794404的博客

08-26

1101

第12章 BOM 本章内容：理解BOM的核心——window 对象控制窗口及弹窗通过location 对象获取页面信息使用navigator 对象了解浏览器通过history 对象操作浏览器历史 BOM是使用JavaScript 开发Web 应用程序的核心，提供了与网页无关的浏览器功能对象。

【前端】【JavaScript】基础知识

我的的博客哦

02-05

5388

二. JavaScript 输入输出语句方法说明 alert(msg) 浏览器弹出警示框 console.log(msg) 浏览器控制台打印输出信息 prompt(into) 浏览器弹出输入框，用户可以输入三. 变量 (一) 变量的使用 (二) 变量语法扩展 (三) 变量命名规范四. 数据类型 (一) 简单数据类型简单数据类型说明默认值 Number 数字型，包含整型，浮点型值，如21，0.21 0 Boolean

element的$confirm点击确定按钮，一直提示取消

weixin_62835765的博客

05-26

1469

在catch中第一行console输出一下，看是否是由于then中代码错误，而一直运行catch中的代码。由于then中的代码运行报错，catch捕捉到错误，所以一直运行catch中的代码。以上代码由于函数没有接受参数，却使用了参数row而报错。

使用Layer Confirm弹窗没有点击确定按钮就执行了确定方法

oopts的博客

05-12

4201

 使用LayerConfirm方法确定回调方法不能传参。如果传参了，会直接执行不会等到点击确定在执行 Layer.confirm("确定执行此操作？", "执行该操作将不能撤回", "确定", AuditRemit, "取消", null); confirm: function (content, title, sureText, sureFunction, ...

弹出框一之基于bootstrap和jquery的自定义弹出框

dgnwy6921的博客

03-27

277

(function ($) { window.Ewin = function () { var html = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' + '<div class...

confirm()弹出对话框时,点击“取消”表单仍然提交的解决方法

清风明月心如意゛

08-27

9303

大家在实际工作中用js的时候可能会遇到这种情况： confirm（）弹出的对话框，当用户点击“取消”的时候，表单仍然提交的问题；一般来说这种问题产生的原因有一下几点： 1：在判断comfirm（）为“取消”的时候，我们没有return false；即： if(!comfirm("确定要提交表单吗？")){ return false; } 这种情况比较简单，不是我今天谈的重

confirm中的“取消"问题

Z_GodGirl的博客

09-15

930

案例<a href="login.jsp" onClick="confirm('确认退出？')">安全退出</a>若这样写，当点击确定按钮跳转到login.jsp,点击取消按钮后仍跳转到login.jsp<a href="login.jsp" onClick="return window.confirm('确认退出？')">安全退出</a> 此时，点击确定按钮跳转到login.jsp,点击

JavaScript Confirm 失效的解决办法

weixin_34319111的博客

12-06

897

今天遇到一个奇怪的问题，在页面后台添加Button的onclick属性，用户删除前给出一个确认提示，可是无论点确定还是取消，都执行后台代码的btnDelete_Click事件。 protectedvoidPage_Load(objectsender,EventArgse){if(!IsPostBack){...

弹窗提示，点击确定提交，取消不让提交

余大冠子的博客

09-18

1442

if (confirm("'应用系统访问权限失效日期'已确认完成?")) { //alert("点击了确定"); return true; } else { //alert("点击了取消"); return false; } ...

u-datetime-picker点击确定和取消无效

最新发布

04-02

<think>好的，我现在需要解决用户提到的u-datetime-picker组件中点击确定和取消按钮无效的问题。首先，用户提到了使用的是uni-datetime-picker组件，并且之前遇到类似问题时有引用到其他组件的解决方案，比如element-ui的日期选择器的问题。我需要结合这些信息和可能的常见原因来分析。首先，回顾用户提供的引用内容。引用[3]提到在uni-datetime-picker中设置清除图标无效的问题，可能涉及组件本身的配置或小程序的兼容性。引用[4]指出element-plus版本过低导致时间选择无反应，可能需要升级版本。引用[2]则说明点击事件可能因为焦点问题未能正确触发，可能需要两次点击才能弹出选择框。接下来，我需要考虑u-datetime-picker（可能是指uni-datetime-picker）的常见问题。可能的因素包括： 1. **事件绑定问题**：确定按钮和取消按钮的事件是否被正确绑定。例如，是否正确监听了@confirm和@cancel事件，或者是否有拼写错误。 2. **版本问题**：组件库的版本可能存在bug，需要检查是否有更新版本，或者查看官方文档是否有相关说明。 3. **数据绑定问题**：v-model是否正确绑定到响应式数据，是否在父组件中正确处理了数据更新。 4. **兼容性问题**：特别是在微信小程序环境中，可能存在特定的兼容性问题，如引用[3]提到的情况。 5. **组件配置问题**：是否有其他配置项影响按钮的行为，比如disabled属性或自定义事件覆盖了默认行为。 6. **焦点或DOM结构问题**：引用[2]中提到点击可能触发了失焦操作，需要检查组件的DOM结构或事件冒泡是否被阻止。接下来，我需要逐步验证这些可能性。首先检查事件监听是否正确，例如是否在组件上正确使用@confirm和@cancel，或者是否在uniapp中需要不同的事件名称。比如，uni-datetime-picker可能需要使用@change而不是@confirm，或者是否有其他特定事件。然后，查看官方文档或社区是否有已知的类似问题，特别是版本相关的bug。如果用户使用的版本较旧，可能需要升级，如引用[4]中的解决方案。数据绑定方面，检查v-model绑定的变量是否正确，是否在data中初始化，是否为响应式数据。例如，在Vue中，如果变量没有正确声明，可能导致更新不触发。兼容性问题可能需要查看微信小程序的特定限制，比如某些API或组件行为在不同端的表现不同。例如，引用[3]中提到设置清除图标无效的问题可能与小程序环境有关，可能需要特定处理。另外，可能需要检查是否有其他代码干扰了事件，比如阻止了事件冒泡或默认行为，或者在父组件中覆盖了子组件的事件处理。可能的解决方案步骤包括： 1. **确认事件绑定正确性**：确保使用正确的事件名称，例如@confirm和@cancel是否适用于该组件，或者是否需要使用@change等其他事件。 2. **检查组件版本**：查看当前使用的uni-ui版本，尝试升级到最新版本，查看问题是否解决。 3. **验证数据绑定**：确保v-model绑定的变量正确，并测试在事件处理函数中是否能正确获取或更新数据。 4. **排查兼容性问题**：在微信开发者工具中调试，查看是否有错误日志，或尝试其他端（如H5）是否存在同样问题。 5. **查看官方示例和文档**：对比官方示例代码，确认是否存在配置遗漏或错误。例如，假设用户的事件处理函数未正确绑定，正确的代码可能如下： ```html <uni-datetime-picker @confirm="handleConfirm" @cancel="handleCancel" v-model="selectedDate" /> ``` 同时，在methods中定义handleConfirm和handleCancel方法。如果这些方法没有被触发，可能需要检查事件名称是否正确，或者是否存在其他阻止事件的情况。如果升级组件版本后问题解决，如引用[4]中的情况，那么建议用户更新uni-ui库到最新版本。此外，可能还需要检查uniapp框架本身的版本，因为框架和组件库的兼容性也很重要。另外，引用[2]中提到点击事件可能需要处理焦点问题，可能涉及到组件的内部实现，可能需要手动触发某些方法或调整点击事件的时机。最后，如果以上方法都无效，可能需要查看社区或官方论坛是否有类似问题的解决方案，或者提交issue给组件维护者。</think>### u-datetime-picker 点击确定/取消按钮无效的解决方案 #### 1. 检查事件绑定语法确保正确使用组件提供的**事件监听器**，不同组件库的事件命名可能存在差异。例如： ```html  <uni-datetime-picker @confirm="handleConfirm" @cancel="handleCancel" v-model="selectedDate" /> ``` ```javascript methods: { handleConfirm(e) { console.log('确认选择:', e); }, handleCancel() { console.log('取消选择'); } } ``` **注意**：部分版本可能需要使用`@change`代替`@confirm`[^3] #### 2. 验证组件版本兼容性通过以下步骤检查版本： ```bash npm list @dcloudio/uni-ui # 查看当前版本 npm install @dcloudio/uni-ui@latest # 升级到最新版 ``` 已知问题案例： - 2.1.5 版本存在事件冒泡阻断问题 - 2.2.0+ 版本修复了移动端点击穿透问题[^4] #### 3. 处理微信小程序特殊限制在小程序环境中添加**强制更新机制**： ```html <uni-datetime-picker :force-update="true" @confirm="handleConfirm" /> ``` ```javascript data() { return { refreshFlag: true } }, methods: { reMountPicker() { this.refreshFlag = false; this.$nextTick(() => { this.refreshFlag = true; }); } } ``` #### 4. 调试数据绑定问题在控制台添加**双向绑定监控**： ```javascript watch: { selectedDate(newVal) { console.log('日期变化:', newVal); } } ``` 常见问题排查： - 未在data中初始化`selectedDate` - 使用Vue2时未用`Vue.set`更新数组类型数据 - 日期格式与组件要求不匹配 #### 5. 处理平台样式冲突添加**样式隔离**声明： ```css /* 在小程序页面样式区添加 */ page { --button-active-color: #007AFF !important; /* 覆盖默认点击效果 */ all: initial; /* 清除全局样式污染 */ } ``` #### 进阶调试方案 1. **事件溯源调试**： ```javascript mounted() { const picker = this.$refs.myPicker.$el; picker.addEventListener('click', (e) => { console.log('DOM点击事件:', e); }, true); // 使用捕获模式 } ``` 2. **跨平台对比测试**： ```html <uni-datetime-picker :platform="platform" /> ``` ```javascript data() { return { platform: 'h5' // 切换测试环境 } } ```