为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我点击了按钮以后,会触发三次alert窗口呢

<!DOCTYPE html>

<html>


<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

    .left div,

    .right div {

        width: 500px;

        height: 80px;

        padding: 5px;

        margin: 5px;

        float: left;

        border: 1px solid #ccc;

    }

    

    .left div {

        background: #bbffaa;

    }

    

    .right div {

        background: yellow;

    }

    

    select {

        height: 100px;

    }

    </style>

    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>


<body>

    <h2>input与textarea</h2>

    <div class="left">

        <h4>测试一</h4>

        <div class="aaron">

            选中文字:input

            <input type="text" value="慕课网" />

        </div>

        <button id="bt1">触发input元素的select事件</button>

        

        <h4>测试二</h4>

        <div class="aaron">

            textarea:

            <textarea rows="3" cols="20">用鼠标选中文字</textarea>

        </div>

    </div>

 

    <script type="text/javascript">


    //监听input元素中value的选中

    //触发元素的select事件

    $("input").select(function(e){

        alert(e.target.value)

    })

    $("#bt1").click(function(){

        $("input").select();

    })



    //监听textarea元素中value的选中

    $('textarea').select(function(e) {

        alert(e.target.value);

    });


    </script>

</body>


</html>


正在回答

2 回答

因为浏览器有默认行为,当你点击按钮时第一次是触发了select事件,第二次就是默认行为,默认行为会选中input的文本,就又触发 了input元素的select事件,在select的回调函数中添加e.preventDefault()就可以取消默认行为了

9 回复 有任何疑惑可以回复我~
#1

690017359 提问者

非常感谢!
2017-09-15 回复 有任何疑惑可以回复我~
#2

慕无忌7473296 回复 690017359 提问者

我试了一下,只有在第一次页面加载后,点击button 会触发3次alert 弹窗。之后再点击button都是2次弹窗。感觉nearrrrr 的回答解释了2次弹窗的情况,不知道为啥第一次点击会触发3次alert 弹窗。
2019-05-04 回复 有任何疑惑可以回复我~

这个e.preventDefault(),函数是添加再第一个$里的。

$("input").select(function(e){    
    alert(e.target.value);         
    e.preventDefault();    
    })


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么我点击了按钮以后,会触发三次alert窗口呢

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信