阻止默认事件_react阻止默认事件 - CSDN
精华内容
参与话题
  • js中阻止默认事件

    千次阅读 2017-08-17 08:56:10
    1>阻止冒泡事件var el = window.document.getElementById("a"); el.onclick = function (e) { //如果提供了事件对象,则这是一个非IE浏览器 if (e && e.stopPropagation) { //因此它支持W3C的stopPropagation()...

    1>阻止冒泡事件

    var el = window.document.getElementById("a");
    el.onclick = function (e) {
        //如果提供了事件对象,则这是一个非IE浏览器
        if (e && e.stopPropagation) {
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        }
        else {
            //否则,我们需要使用IE的方式来取消事件冒泡 
            window.event.cancelBubble = true;
            return false;
        }
    }
    

    2>阻止默认事件

    var el = window.document.getElementById("a");
    el.onclick = function (e) {
        //如果提供了事件对象,则这是一个非IE浏览器
        if (e && e.preventDefault) {
            //阻止默认浏览器动作(W3C) 
            e.preventDefault();
        }
        else {
            //IE中阻止函数器默认动作的方式 
            window.event.returnValue = false;
            return false;
        }
    }
    

    3>jQeury阻止默认和冒泡事件

    阻止冒泡事件

            $("a").click(function (e) {
                e.stopPropagation();
            });
    

    阻止默认事件

            $("a").click(function (e) {
                e.preventDefault();
            });
    

    阻止默认和冒泡事件

            $("a").click(function (e) {
                return false;
            });
    
    展开全文
  • javascript阻止默认事件

    2019-06-03 16:03:42
    让我们近距离了解一下事件处理函数的工作机制。在给某个元素添加了事件处理函数后,一旦事件发生,相应的javascript代码返回布尔值 true 或者 false。这样一来,当这个链接被点击时,如果这段JavaScript代码返回值是...

    让我们近距离了解一下事件处理函数的工作机制。在给某个元素添加了事件处理函数后,一旦事件发生,相应的javascript代码返回布尔值 true 或者 false。这样一来,当这个链接被点击时,如果这段JavaScript代码返回值是 true ,onclick事件处理函数就认为“这个链接被点击了”;反之,如果返回值是 false ,onclick事件处理函数就认为“这个链接没有被点击”。
    可以通过下面这个简单测试去验证这一结论:

    测试代码:

    <a href="http://www.baidu.com" onclick="return false;">Click me</a>
    

    当点击这个链接时,因为 onclick 返回的是false,所以这个链接的默认行为没有被触发。
    同样道理,我们在onclick里面调用某个自定义的js方法的时候,可以在调用方法后增加一条**return false;**语句,就可以防止默认行为的出现。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>SHow Pictures</title>
    </head>
    <body>
    	<a href="http://www.baidu.com" onclick="return false;">Click me</a>
    	<h3>Click Th link,show the picture.</h3>
    	<div>
    		<ul>
    			<li>
    				<a href="imgs/carrots-on-earth.jpg" onclick="showPic(this); return false;">Earth</a>
    			</li>
    			<li>
    				<a href="imgs/flying-poodle-ears.jpg" onclick="showPic(this); return false;">Ears</a>
    			</li>
    			<li>
    				<a href="imgs/playful-patterned-sphere-hot-air-balloon-floats-in-blue-sky.jpg" onclick="showPic(this); return false;">Sky</a>
    			</li>
    		</ul>
    	</div>
    	<img id="placeholder" src="imgs/null.jpg" width="400px" alt="">
    	<script src="pic.js"></script>
    </body>
    </html>
    
    

    pic.js代码:

    function showPic(whichPic) {
        var placholder = document.getElementById("placeholder");
        var source = whichPic.getAttribute("href");
        placeholder.setAttribute('src', source);
    }
    

    这段代码的作用就是点击a标签,在本窗口展示对应的图片。

    展开全文
  • 阻止a标签默认事件的几种简单方法

    万次阅读 2017-06-27 15:59:54
    alert("a标签默认事件阻止,执行js函数"); } 第二种:百度 (最常见的,但是点击后页面会返回到顶部,不可用);所以又有了百度或者百度 测试: 百度 百度1 百度2 function myjs(){ alert("a标签默认事

    第一种: <a href = " javascript: void ( 0 ); ">百度</a> 或者<a href = " javascript:; ">百度</a>

    测试:(可行)

    <a href="javascript:void(0);" οnclick="myjs()">百度</a>
    <a href="javascript:;" οnclick="myjs()">百度1</a>
    <script type="text/javascript">
        function myjs(){
            alert("a标签默认事件被阻止,执行js函数");
        }
    </script>

    第二种:<a href = " # ">百度</a> (最常见的,但是点击后页面会返回到顶部,不可用);所以又有了<a href = " ## ">百度</a>或者<a href = " #! ">百度</a>

    测试:

    <div id="test" style="width: 1000px; height: 1300px; background: rgb(56,132,63)"></div>
    <a href="#" οnclick="myjs()">百度</a> <!--不可行(执行js函数后页面会返回到顶部)-->
    <a href="##" οnclick="myjs()">百度1</a> <!--测试未发现问题-->
    <a href="#!" οnclick="myjs()">百度2</a> <!--测试未发现问题-->
    <script type="text/javascript">
        function myjs(){
            alert("a标签默认事件被阻止,执行js函数");
        }
    </script>

    第三种: e.preventDefault();阻止默认事件(不支持IE),IE中用window.event.returnValue = false; 阻止默认事件

    测试:(可兼容IE)

    <a id="test" href="http://www.baidu.com">百度</a>
    <script type="text/javascript">
        //声明并获取element
        var test = document.getElementById("test");
        //阻止默认事件函数
        function stopDefault(e) {
            if (e && e.preventDefault)
                e.preventDefault();
            else
                window.event.returnValue = false; //兼容IE
        }
        //自定义函数
        function myjs(){
            alert("阻止默认事件,执行自定义函数");
        }
        //element点击阻止默认事件并执行自定义函数
        test.onclick =  function(e){
            stopDefault(e);
            myjs();
        }
    </script>


    展开全文
  • 阻止默认事件的方法?w3c用的是preventDefault(),IE用的是returnValue = false阻止所有事件的方法?return false。javascript的return false只会阻止默认行为,而用jQuery的话则既阻止默认行为又防止对象冒泡。

    阻止事件冒泡?

    w3c用的是stopPropagation(),IE用的是cancelBubble=true。

    阻止默认事件的方法?

    w3c用的是preventDefault(),IE用的是returnValue = false

    阻止所有事件的方法?

    return false。javascript的return false只会阻止默认行为,而用jQuery的话则既阻止默认行为又防止对象冒泡。

    展开全文
  • 如何阻止事件冒泡与默认事件

    千次阅读 2018-07-31 15:58:07
    【修真院小课堂】——如何阻止时间冒泡冒泡与默认事件 目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 8.更多讨论 1.背景介绍 1.什么是事件? 事件是文档或浏览器...
  • 阻止默认事件

    2018-08-10 10:15:56
    return false 各浏览器都可以用 e.preventDefault()
  • 阻止默认事件函数

    2019-01-30 17:45:37
    //阻止默认事件函数 function stopDefault(e) { if (e &amp;&amp; e.preventDefault) e.preventDefault(); else window.event.returnValue = false; //兼容IE }
  • 今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让...这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父...
  • javascript的阻止默认事件和阻止冒泡事件 这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:【http://www.cnblogs.com/Essence/p/4266618.html】 事件冒泡与默认行为   在说事件...
  • 阻止a标签默认行为的几种简单方法

    万次阅读 多人点赞 2016-04-16 11:07:53
    以下简单总结以下a标签阻止默认行为的几种简单方法,希望可以对有需要的朋友有些帮助, (1) Click Me onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。 Click Me 和void...
  • vue click阻止事件冒泡与默认行为

    万次阅读 2019-05-14 10:48:55
    vue click阻止事件冒泡与默认行为阻止事件冒泡阻止默认行为 阻止事件冒泡 <div @click="click1()" > <a @click="click2()"></a> </div> //正确写法 <div @click="click1()" > ...
  • 如何阻止表单的默认提交事件

    万次阅读 多人点赞 2017-10-08 23:15:42
    如下,可以看到一点击提交按钮,浏览器的刷新按钮闪了一下:如果想要阻止表单的默认提交事件,有以下几种方法:1.将标签内按钮类型从type="submit"修改为type="button"2.表单内的未指定类型时,默认的类型为submit,...
  • vue.js阻止事件冒泡和默认事件

    万次阅读 2017-09-27 18:23:32
    首先我们来看原生JS取消事件冒泡方法:e.stopPropagation();... //IE浏览器原生JS阻止默认事件方法:e.preventDefault(); //非IE浏览器 window.event.returnValue = false; //IE浏览器而vue.js给我们提供了更简便的
  • React阻止默认行为

    万次阅读 2019-11-24 19:54:46
    在React中与之前写html阻止默认行为是有些不一样的,如果是写html我们还可以使用 return false 的方法阻止浏览器的默认行为,但是在react中则行不通,在React中必须使用preventDefault。 例如,通常我们在 HTML 中...
  • jq阻止事件冒泡和默认行为的方法

    千次阅读 2018-05-12 20:24:04
    $("#btn").click(function(event){ event....停止事件冒泡,但是不会阻止默认行为 return false; // 2.阻止事件冒泡,也阻止了默认行为 event.preventDefault(); // 3.阻止默认行为,不阻止事件冒泡});...
  • react中的阻止默认行为

    千次阅读 2019-02-02 11:40:11
    在react中不像在HTML中一样用false,使用return false即可,而是要明确调用 preventDefault 例如: function handleClick(e){ e.preventDefault(); }
  • Angularjs 阻止默认事件

    千次阅读 2016-09-05 11:14:57
    Angularjs 阻止默认事件
  • vuejs-阻止事件冒泡与默认行为

    万次阅读 2017-05-18 21:02:48
    阻止事件冒泡与默认行为
  • JQuery阻止默认事件冒泡

    千次阅读 2018-06-15 10:27:41
    1.事件冒泡 事件冒泡就是,你在执行元素点击事件的时候同时也... 阻止事件冒泡:even.stopPropagation();//不触发除本身之外的其他任何控件的事件 【案例】 定义两个div,第一个div里嵌套一个span标签,没以个di...
  • 阻止表单的默认提交事件

    万次阅读 2018-04-23 11:41:04
     如下,可以看到一点击提交按钮,浏览器的刷新按钮闪了一下:如果想要阻止表单的默认提交事件,有以下几种方法:1.将&lt;input&gt;标签内按钮类型从type="submit"修改为type="button"2...
1 2 3 4 5 ... 20
收藏数 87,124
精华内容 34,849
关键字:

阻止默认事件