问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

click事件内的select事件为什么会触发多次？

头像
末名
    12332838
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("input").select(function(){
            $("input").after("文本被选中！");
          });
          $("button").click(function(){
            $("input").trigger("select");
          });
        });
    </script>


<body>
    <input type="text" name="FirstName" value="Hello World" />
    <br />
    <button>激活 input 域的 select 事件</button>
</body>

    文本框后面会添加“文本被选中！文本被选中！文本被选中！”，为什么会触发多次？

    javascript
    阅读 7.8k
    4 个回答
    得票最新
    头像
    Ewellyuan
      1.3k115

      其实就是个冒泡问题

      $("input").select(function(e){              
    $("input").after("文本被选中！");
    return false;
  });
  $("button").click(function(){
    $("input").trigger("select");
    return false;
  });
      头像
      kikong
        19.1k31320

        当你使用鼠标取选择文本框中的文字的时候，当有文字被选中，就会触发一次，第1次选择一个文字，触发，选中2个又被触发...
        而当你非手工触发selected事件是，会将当前文本全部选中，只触发一次,从0到全部

        <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../script/jquery-2.1.3.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("input").select(function(){
                $("input").after("文本被选中！");
            });
            $("button").click(function(){
                $("input").trigger("select");
            });

            document.getElementById("FirstName").addEventListener('select', function() {
                console.log('Selection changed!');
            }, false);

        });
    </script>
</head>
<body>

<input type="text" id="FirstName" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>


</body>
</html>
        头像
        紙上得來終觉浅
          25628
          用triggerHandler
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题