首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

单击“保存并关闭”按钮后调用preventDefault时,OnSave事件会触发两次

的原因是因为preventDefault()方法用于阻止元素的默认行为,而OnSave事件可能是绑定在按钮上的点击事件。当点击按钮时,首先会触发按钮的默认行为,即提交表单或关闭窗口等操作,然后才会触发绑定在按钮上的点击事件。

当调用preventDefault()方法时,它会阻止按钮的默认行为,但不会阻止事件的传播。因此,OnSave事件仍然会继续传播并触发。

为了解决这个问题,可以在点击事件的处理函数中添加一个判断条件,只有当preventDefault()方法未被调用时才执行相应的逻辑。示例代码如下:

代码语言:javascript
复制
function onSaveClick(event) {
  if (!event.defaultPrevented) {
    // 执行保存逻辑
  }
}

document.getElementById('saveButton').addEventListener('click', onSaveClick);

在上述代码中,通过判断event.defaultPrevented属性来确定preventDefault()方法是否被调用,只有当preventDefault()方法未被调用时才执行保存逻辑。

关于云计算领域的相关知识,可以参考腾讯云的文档和产品介绍:

  • 云计算概念:云计算是一种通过网络提供计算资源和服务的模式,它可以按需提供计算能力、存储空间和应用程序等资源。云计算可以帮助用户降低成本、提高灵活性和可扩展性。
  • 云计算分类:云计算可以分为公有云、私有云和混合云。公有云是由云服务提供商提供的共享资源,私有云是由单个组织或企业拥有和管理的资源,混合云是公有云和私有云的结合。
  • 云计算优势:云计算具有灵活性、可扩展性、高可用性、成本效益和安全性等优势。用户可以根据需求灵活调整资源,提高业务的可扩展性和可用性,同时降低成本和提高安全性。
  • 云计算应用场景:云计算广泛应用于各个行业,包括企业应用、移动应用、大数据分析、人工智能、物联网等领域。例如,企业可以使用云计算来部署和管理应用程序,存储和分析大数据,构建智能化的解决方案。

腾讯云相关产品和产品介绍链接地址:

以上是关于单击“保存并关闭”按钮后调用preventDefault时,OnSave事件会触发两次的解释和相关云计算知识的回答。希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

怎么创建 JavaScript 自定义事件

例如,当用户单击按钮事件将 isTrusted 设置为 true,而我们自定义的事件会将其设置为 false,因为该事件是由 JavaScript 触发的。...举个例子,如果 JavaScript 添加了一个名为 doubleclick 事件,然后你已经在时候 doubleclick 自定义事件了,那么你遇到问题,因为你自定义代码将触发事件,并且浏览器也尝试触发它自己的副本...该事件还会将按钮单击之间的总时间作为自定义数据传递。 首先,我们需要创建一个正常的单击事件监听器来确保是否有双击。...lastClick = 0 }) 复制代码 上面的代码使用 timeStamp 属性来确保按钮单击事件之间的时间。如果点击之间的时间超过 500 毫秒。则会立刻返回更新 lastClick 的值。...一旦我们在 500 毫秒内点击了两次,我们将通过 if 检查触发我们的双击事件。为此,我们需要创建我们的事件调用它。

1.3K10

怎么创建 JavaScript 自定义事件

}) 最后一步,你需要做的事,触发创建正在监听的事件。...例如,当用户单击按钮事件将 isTrusted 设置为 true,而我们自定义的事件会将其设置为 false,因为该事件是由 JavaScript 触发的。...举个例子,如果 JavaScript 添加了一个名为 doubleclick 事件,然后你已经在时候 doubleclick 自定义事件了,那么你遇到问题,因为你自定义代码将触发事件,并且浏览器也尝试触发它自己的副本...lastClick = 0 }) 上面的代码使用 timeStamp 属性来确保按钮单击事件之间的时间。如果点击之间的时间超过 500 毫秒。则会立刻返回更新 lastClick 的值。...一旦我们在 500 毫秒内点击了两次,我们将通过 if 检查触发我们的双击事件。为此,我们需要创建我们的事件调用它。

1.4K10

使用 TypeScript 编写 React.js 应用 | 笔记

className="icon-edit "> Edit ); } 将编辑按钮单击事件连接到...更新 handleEditClick 事件调用传递到 onEdit props 中的函数删除 console.log 语句。...按钮。 仅当不是 loading 且没有 error 才显示 More... 按钮, 并处理 More... 按钮的 click 事件调用 handleMoreClick 。...更改窗体中的项目名称 单击表单上的保存按钮 验证卡片是否显示更新的数据 刷新浏览器 验证项目是否仍处于更新状态 注意: 更新卡片会被排到最后, 目前没有在代码中排序 错误推断, 发现并不对, db.json...保存更新并不会重新排序: 于是按照 db.json 中顺序, 而保存更新, 保存到 db.json 最后 (×) 更新, 对应保存更新到 keeptrack/api/db.json 文件 20.

69890

java表单提交方法_表单提交的几种方式

以这种方式提交表单,浏览器会在将请求发送给服务器之前触发submit事件。这样,我们就有机会验证表单数据,据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。...event = EventUtil.getEvent(event); //阻止默认事件 EventUtil.preventDefault(event); }); 调用preventDefault()方法阻止了表单提交...来看一个例子: var form = document.getElementById(“myForm”); //提交表单 form.submit(); 在以调用submit()方法的形式提交表单,不会触发...提交表单可能出现的最大问题,就是重复提交表单。在第一次提交表单,如果长时间没有反映,用户可能变得不耐烦。这时候,他们也许反复单击提交按钮。...解决这一问题的办法有两个: 在第一次提交表单就禁用提交按钮; 利用onsubmit事件处理程序取消后续的表单提交操作。 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

4.9K40

js事件防止冒泡

事件目标 如今。事件处理程序中的变量event保存事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的,可是没有被全部浏览器实现 。...浏览器载入一个新页面。这样的行为与我们讨论的事件处理程序不是同一个概念,它是单击锚元素的默认操作。类似地,当用户在编辑完表单按下回车键。...触发表单的submit事件,在此事件发生,表单提交才会真正发生。 假设我们不希望运行这样的默认操作。...在这样的情况下,.preventDefault()方法则能够在触发默认操作之前终止事件 。 提示 当在事件的环境中完毕了某些验证之后,一般会用到.preventDefault()。比如。...这是对在事件对象上同一调用.stopPropagation()和.preventDefault()的一种简写方式。

2.4K40

AngularDart4.0 指南- 模板语法二 顶

以下事件绑定侦听按钮单击事件,每当发生点击时调用组件的onSave()方法: Save 目标事件 圆括号之间的名称 - 例如(click...在以下示例中,目标是按钮单击事件。...删除英雄更新模型,可能触发其他更改,包括查询保存到远程服务器。 这些变化通过系统渗透,最终显示在相关视图。 双向绑定([(…)]) 您经常希望显示数据属性,并在用户进行更改时更新该属性。...单击按钮可在最小/最大值限制内增加或减小size,然后用调整的大小触发(发出)sizeChange事件。...单击按钮通过双向绑定更新AppComponent.fontSizePx。 修改的size值流向样式绑定,使显示的文本变大或变小。

29.9K20

移动端click延迟及zepto的穿透现象 转

移动端click事件300ms的延迟现象的原因: 在最早iphone的safar浏览器中,为了实现触屏中双击放大效果,当用户点击屏幕后会判断在300ms内是否有第二次点击,如果有,就理解成双击,若没有就是单击...tap事件触发遮罩层消失,该标签正下方有一个绑定了click的按钮,此时点击上层的标签,同时也触发下层元素的click事件,出现穿透的现象。...为什么会出现穿透: 结合前面tap事件的原理来分析: 当触发tap事件,上层遮罩层关闭,此时事件只进行到touchend,而click是在大概300ms触发,当click触发,上面的遮罩层已消失...如何解决穿透: 方法一:直接将上层元素的tap事件换成click事件(会出现300ms的延迟触发事件) 方法二:在click事件触发前阻止它,如在touchend的事件中使用e.preventDefault...因为zepto的tap事件统一是在document的touchend触发的,若在这里使用e.preventDefault(),那页面上所有元素在touchend触发事件都不会被执行了。

1.3K10

阻止a标签的默认事件及延伸

看如下实例: (1)把单击事件处理程序注册到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接,浏览器会加载一个新页面。...(2)当用户在编辑完表单按下回车键触发表单的submit事件,在此事件发生,表单提交才会真正发生。 这种行为与我们讨论的事件处理程序不是同一个概念,它是单击标签元素的默认操作。...如果我们不希望执行这种默认操作,那么在事件对象上调用.stopPropagation()方法也无济于事,因为默认操作不是在正常的事件传播流中发生的。...既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接,提交按钮等。...当Event 对象的 cancelable为false,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。

2.4K60

JavaScript 编程精解 中文第三版 十五、处理事件

两次点击事件触发时机接近,则在第二次点击事件之后,也触发"dbclick"(双击,double-click)事件。...preventDefault,来覆盖浏览器的默认行为(可能包括在滑动滚动页面),防止触发鼠标事件,您也可能拥有它的处理器。...类似于焦点事件,装载事件是不会传播的。 当页面关闭或跳转(比如跳转到一个链接)触发beforeunload事件。该事件用于防止用户突然关闭文档而丢失工作结果。...按下鼠标按钮触发mousedown、mouseup和click事件。移动鼠标会触发mousemove事件。...简单的解决方案是保存固定鼠标的轨迹元素循环使用它们,每次mousemove事件触发将下一个元素移动到鼠标当前位置。

5.5K20

一步一步学Vue(四)

_mock_save(this.items); }, /** * 编辑按钮点击,进行表单数据绑定 *...2、SearchBar组件   SearchBar组件比较简单,只是简单触发查询按钮,发射(触发)onsearch事件,然后TodoContainer组件中使用 @onsearch="search($event...} } } 这两个数据渲染组件就没什么好说名的了;但是大家发现一个很不爽的问题:由于我们在容器中统一管理了业务逻辑(更逼格高一些,叫状态),所以在todoitem组件中触发事件没办法直接到...TodoContainer组件中,只能通过一级一级的往上传递,所以在todolist中也有和todoitem中类似的触发事件的代码this.emit('onremove', e);这里组件层级才2级,如果多了状态管理就是灾难了..._mock_save(this.items); }, /** * 编辑按钮点击,进行表单数据绑定 *

1.2K10

【移动端】touch事件及穿透事件

苹果的解决方案: 方案一:双指进行缩放 方案二:在屏幕上双击进行放大(单击300ms,再单击才算双击),造成了,移动端点击事件,300ms 延迟的问题 解决方案,就是使用touch事件来替代 移动端新增...因click是在touch系列事件发生300ms才触发的,混用click和touch肯定会导致穿透问题....点击穿透现象的情况: 1) 蒙层问题 蒙层的关闭按钮绑定的是touch事件,而按钮下面元素绑定的是click事件,touch事件触发,蒙层消失,300ms这个点的click事件触发。...2) 跨页面点击穿透问题 如果按钮下面恰好是一个href属性的a标签,那么页面就会发生跳转(a标签跳转默认是click事件触发的) 解决问题: 方法一:自己封装tap事件不会有穿透问题,因为阻止了默认行为...e.preventDefault(); 方法二:吃掉touch之后的click, 使用计时器,让touch延迟350ms再隐藏蒙层 方法三:使用fastclick.js;可以直接写click事件

1.9K10

10-移动端开发教程-移动端事件

因为双击缩放检测的存在,在移动设备屏幕上点击操作的事件执行顺序: touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件,可以调用 event.preventDefault...touchmove事件和鼠标的mousemove事件一样都会多次重复调用,所以,事件处理不能有太多耗时操作。不同的设备,移动同样的距离 touchmove 事件触发频率是不同的。...//调用这个函数的原型对象上的_init方法,返回 return myQuery.prototype....移动端点击穿透问题 如果某个返回按钮的位置,恰好在要返回的这个页面的带有href属性的a标签的范围内,在点击返回按钮,页面快速切换到有a标签的页面,300ms触发了click事件,从而触发了a标签的意外跳转...罪魁祸首其实就是a标签跳转默认是click事件触发,而移动端的touch事件触发之后,依然会在300ms触发click事件。 解决办法: 1.就是阻止触发touch事件完成的click事件

6.7K80

10-移动端开发教程-移动端事件

因为双击缩放检测的存在,在移动设备屏幕上点击操作的事件执行顺序: touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件,可以调用 event.preventDefault...touchmove事件和鼠标的mousemove事件一样都会多次重复调用,所以,事件处理不能有太多耗时操作。不同的设备,移动同样的距离 touchmove 事件触发频率是不同的。...//调用这个函数的原型对象上的_init方法,返回 return myQuery.prototype....移动端点击穿透问题 如果某个返回按钮的位置,恰好在要返回的这个页面的带有href属性的a标签的范围内,在点击返回按钮,页面快速切换到有a标签的页面,300ms触发了click事件,从而触发了a标签的意外跳转...罪魁祸首其实就是a标签跳转默认是click事件触发,而移动端的touch事件触发之后,依然会在300ms触发click事件。 解决办法: 1.就是阻止触发touch事件完成的click事件

6.3K70

5、React组件事件详解

; 当某个事件触发,React根据这个内部映射表将事件分派给指定的事件处理函数; 当映射表中没有事件处理函数,React不做任何操作; 当一个组件安装或者卸载,相应的事件处理函数自动被添加到事件监听器的内部映射表中或从表中删除...单击触发react事件 React并不是将click事件绑在该div的真实DOM上,而是在document处监听所有支持的事件,当事件发生冒泡至document处,React...将事件内容封装交由真正的处理函数运行 ?...4、表单事件 onChange onInput onSubmit onChange事件经过React改良,内容改变即可实时触发;而原生的需内容改变且失去焦点触发触发。...ReactEvent 通过设置原生事件绑定为冒泡阶段调用,且每次测试单击子元素按钮: 在子元素原生事件程序中阻止事件传播,则打印出: 子元素原生事件绑定事件触发; 在父元素元素事件程序中阻止事件传播

3.7K10

JS魔法堂:定义页面的Dispose方法——unload事件启示录

前言  最近实施的同事报障,说用户审批流程直接关闭浏览器,操作十余次系统就报用户会话数超过上限,咨询4A同事后得知登陆需要显式调用登出API才能清理4A端,否则必然超出会话上限。  ...我们看看什么时候触发这两个事件呢?...这么多操作触发这两兄弟,怎么处理才好啊?没啥办法,针对功能需求做取舍咯。对于我的需求就是在页面的Dispose方法中调用登出API,经过和实施同事的沟通——只要刷新页面就触发登出。...navigation机制,将页面A的状态保存到缓存中,当通过浏览器的后退/前进按钮跳转马上从缓存中恢复页面,而不是重新实例化。...另外load仅在页面初始化才会触发,因此从bfcache中恢复页面并不会触发

2.2K90

事件高级

该方法接收两个参数: eventNameWithOn: 事件类型字符串,比如onclick、 onmouseover,这里要带on callback: 事件处理函数,当目标触发事件回调函数被调用...键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。 事件对象的使用 事件触发发生就会产生事件对象,并且系统以实参的形式传给事件处理函数。...当我们注册事件,event 对象就会被系统自动创建,依次传递给事件监听器(事件处理函数) ....了解 跟 this 有个非常相似的属性 currentTarget ie678不认识     6、 阻止默认行为 html中一些标签有默认行为,例如a标签被单击,默认进行页面跳转...(给父元素注册事件,利用事件冒泡,当子元素的事件触发冒泡到父元素,然后去控制相应的子元素。)

1.3K20

一个Electron的设计缺陷及应对方案

shupi.jpg 当你想实现阻止Electron窗口关闭弹出询问对话框,提示用户:“文章尚未保存,是否要关闭窗口”这类业务,那么你99%碰到这个BUG: https://github.com...问题描述 要阻止窗口关闭,必须在窗口的关闭事件中,执行preventDefault操作才行,如下代码所示: win.on("close", (e) => { e.preventDefault();...这就带来了一个业务问题:我们往往在询问用户获得用户的允可才会阻止窗口关闭,比如:“文章尚未保存,您确认关闭窗口吗?”...(此处的preventDefault是同步操作),当我们询问过用户,并且用户做出了确认关闭的选择,这个变量才会被设置为true。...此时立即调用窗口的close方法,这个窗口的close事件被再次触发,因为winCanBeClosedFlag 变量已经被置为true了,所以不会执行preventDefault操作,窗口被正常关闭

1.1K53
领券