JS中取消事件的两种方式

最新推荐文章于 2023-06-06 10:33:25 发布
最新推荐文章于 2023-06-06 10:33:25 发布
阅读量3.8k 收藏
点赞数 1
分类专栏： JavaScript DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanmei1986/article/details/50779192
版权

取消事件：2种情况：
           1. 在html中绑定事件处理函数：2个return

<span style="font-size:14px;"><script type="text/javascript">
     function validate(obj) {
        if (confirm("提交表单?")) {
           alert(obj.value);
           return true;
        } else {
           alert(obj.value);
           return false;
        }
     }
  </script>
  <body>
    <form action="http://www.baidu.com" <span style="background-color: rgb(255, 255, 153);">οnsubmit="return validate(document.getElementByIdx_x('myText'))</span>;"> <!—参数的这种写法注意下-->
   
       <input type="text" id="myText"/>
       <input type="submit" value="submit"/>
   
    </form>
  </body></span>



           2. js中动态绑定事件处理函数：
               DOM标准：e.preventDefault()
               IE8: e.returnValue=false
               兼容：if(e.preventDefault){
                      e.preventDefault()
                         }else{
                      e.returnValue=false
                         }


<span style="font-size:14px;"><html>
<head>
    <title>表单提交的方式</title>
    <script>
        function checkUser() {
            //事件触发时，获取事件对象
            var e=window.event||arguments[0]
            var result = document.getElementById("userid").value;
            var password = document.getElementById("userpassid").value;</span>
<span style="font-size:14px;">            //当用户名或密码为空，取消事件，阻止表单提交
            if(reuslt==""||password==""){
      <span style="background-color: rgb(255, 255, 102);">          if(e.preventDefault()){
                    e.preventDefault();
                }else{
                    e.returnValue=false;
                }</span>

            }
        }
        window.onload = function () {
            //js动态绑定事件
            <span style="color:#ffff99;">do</span><span style="background-color: rgb(255, 255, 153);">cument.forms("myform").addEventListener("submit","checkUser",false);</span>

        }
    </script>
</head>
<body>
<form id="formid" name="myform" method='post' action='user_login_submit.action'>
    <table width="100%" border="0">
        <tr>
            <td width="60" height="40" align="right">用户名 </td>
            <td><input type="text" value="" class="text2" name="username" id="userid"/></td>
        </tr>
        <tr>
            <td width="60" height="40" align="right">密  码 </td>
            <td><input type="password" value="" class="text2" name="userpass" id="userpassid"/></td>
        </tr>
        <tr>
            <td width="60" height="40" align="right"> </td>
            <td>
                <div class="c4">
                    <input type="submit" value="" class="btn2"/>
                </div>
            </td>
        </tr>
    </table>
</form>

</body>
</html></span>


yuanmei1986
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript移除事件的方法
猿码互联
06-01 541
这两种方法都可以用于移除事件，但建议使用removeEventListener方法，因为它提供了更精确的控制，并且可以移除通过addEventListener方法添加的任何事件处理函数。而onclick=null方法只能移除通过DOM属性添加的事件处理函数。它需要传入三个参数：事件类型、事件处理函数和一个可选的布尔值来指定事件是否在捕获阶段触发。在DOM中，可以将一个事件处理函数直接设置为null来移除事件。这种方法只适用于内联事件处理函数或通过DOM属性添加的事件处理函数。
MyEclipse取消验证Js的两种方法
10-26
本文将详细介绍两种方法来取消MyEclipse中的JavaScript验证，以提升开发效率。 **方法一：通过工程属性设置取消验证** 1. 首先，你需要打开MyEclipse，然后选择你要取消验证的Web工程。 2. 右键点击该工程，选择...
js事件（添加、删除）以及委托
qq_61706112的博客
02-13 700
1. 传统方式 var btn1 = document.querySelector('#btn1'); btn1.onclick = function() { // 注册事件 alert('hello'); this.onclick = null; // 删除事件 } 2. addEventListener （IE9以上） btn1.addEventListener('click', fn); function fn() { alert('he
js如何取消事件？
热门推荐
羽公子的博客
11-25 1万+
事件处理程序分为DOM0级和DOM2级，如果是用onclick方式绑定的事件可以用如下方法取消： btn.onclick=null;//删除事件处理程序 如果使用addEventListener()方法添加事件，可以通过removeEventListener()移出事件，需要注意两点： 1.removeEventListener()的第三个参数必须和addEventListener()方法的第三...
JavaScript中的事件取消
weixin_34358365的博客
03-19 224
JavaScript中事件取消分两种类型：一、取消事件的默认行为，比如：取消form表单默认的提交； 可以使用如下的代码来取消事件的默认行为： function cancelHandler(event) { var event = event || window.event;//IE8之前的event只能通过window.event来获得 ...
js取消 删除点击事件
h0713的博客
06-28 6330
用js赋予点击事件 var redone=document.getElementById("gd2_3"); redone.addEventListener('click',canbeclick,true); function canbeclick(){ alert("啊，好爽啊!"); } 用js取消/删除点击事件 redone.removeEventListener('click',canbeclick,true); 上面代码亲测有效。 因为看到网上有将redone.οnclick=
JS笔记--day22. 01.jq取消绑定事件
lmd_hdx的博客
07-06 468
jq取消绑定事件
js如何取消事件冒泡
10-26
在JavaScript中，有两种主要的方式来阻止事件冒泡： 1. **`event.stopPropagation()`**：这是W3C标准的方法，适用于非IE浏览器。当你在事件处理函数中调用`stopPropagation()`时，它会阻止事件继续向上层元素传播。...
JQuery中阻止事件冒泡几种方式及其区别介绍
10-26
在jQuery中，有两种主要的方法可以用来阻止事件冒泡：`event.stopPropagation()` 和 `return false`。下面将详细探讨这两种方法及其差异。 1. **event.stopPropagation()** `event.stopPropagation()` 是一个...
Javascript中click与blur事件的顺序详析
10-19
在JavaScript中，click和blur是两种常见的事件，它们分别用于处理不同的交互情况。click事件通常在用户点击元素时触发，而blur事件则在元素失去焦点时发生。在某些特定的场景下，理解这两种事件的执行顺序是至关重要...
js禁用input的回车事件
最新发布
a417655340的博客
06-06 483
" >添加。
js去除事件的方式
qq_42800468的博客
08-09 2870
传统方式，可以使用onclick = null; 新方式，使用removeEventListener
Javascript中的DOM的事件合集-事件流·事件委托·取消事件冒泡和捕获
1900's 88 keys的博客
11-30 470
DOM的事件-事件流·事件委托·取消事件冒泡和捕获 文章目录DOM的事件-事件流·事件委托·取消事件冒泡和捕获前言事件的冒泡（Bubble）事件的捕获事件传播的三个阶段捕获阶段目标阶段冒泡阶段事件委托target || currentTargettargetcurrentTarget取消事件的冒泡和捕获bubblesstopPropagation()stopImmediatePropagation()cancelBubble兼容写法 前言 当有以下图片的内容时，如果我们用鼠标点击中间3方框,是不是也同时点
Javascript中的事件处理（事件注册、删除、委托）
m0_46420078的博客
11-29 1131
一、Javascript中的事件处理 1、事件 ：用户进行的某种操作 2、事件源：产生（触发 ）事件的对象 3、事件处理程序（事件处理函数 ）：当事件被触发后所执行的操作（代码） 4、事件的注册：让浏览器对象能够识别事件 （1）传统的方式注册 ：元素对象.事件名 = function（）{ 事件处理程序 } <b...
13、JS事件（事件绑定、事件流、阻止事件冒泡、取消元素默认行为）
weixin_45065754的博客
04-08 770
1、事件绑定方法（两种）与区别 2、什么是事件流 3、阻止事件冒泡 4、取消元素默认行为
JS之事件冒泡、取消冒泡、事件委托
qq_35270769的博客
05-17 378
事件冒泡：当子元素事件触发，会沿着包含关系，向上传递，每一级都会接收到事件。 <style> #divOne { width: 300px; height: 300px; background-color: red; } #divTwo { width: 150px; height: 150px; background-color: yell
阻止冒泡事件 2020/11/24
weixin_50286102的博客
11-24 195
stopPropagation() 语法 event.stopPropagation(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati
事件高级：事件的绑定及取消、DOM事件流、事件委托
qq_39804990的博客
05-31 292
事件高级 1.事件基础 1.1事件对象 事件处理函数：事件发生时用来处理事件的函数 obtn.onclick = function(){} 事件对象：当事件发生的时候，浏览器会将事件相关信息保存在内置全局对象 window.event 当中 取值： 标准 IE：window.event 低版本ff：事件处理函数的第一个参数 属性 event.type：事件类型 event.clientX/Y：鼠标相对于屏幕的位置 event.target/srcElement：真正触发事件的对象 event.a
js 事件的取消
qq_35187942的博客
01-06 3334
ie:obj.detachEvent(事件名称，事件函数); 标准：obj.removeEventListener(事件名称，事件函数，是否捕获); &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="{CHARSET}"&gt;         &lt;title&gt;&lt;/titl..
JS 取消事件绑定的兼容函数
05-26
JS 取消事件绑定的兼容函数通常可以使用以下两种方式实现： 1. 使用 removeEventListener() 方法（现代浏览器支持）： ```javascript function removeEvent(element, type, handler) { if (element....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值