代码之家  ›  专栏  ›  技术社区  ›  Reigel Gallarde

左键单击+按住=添加复选框

  •  2
  • Reigel Gallarde  · 技术社区  · 14 年前

    HTML

      <button>a</button>
      <div class="headerer">
         <p>visit <a href="http://reigel-codes.co.cc">reigel-codes.co.cc</a></p>
      </div>
    

    问题

    如何通过按住左键单击在<按钮>后添加复选框?…然后在释放左键单击时停止添加…

    我已经试过了,

    $(document).ready(function(){
       $('button').mousedown(function(){
        $(this).after('<input type="checkbox">')
      });
    })
    
    2 回复  |  直到 14 年前
        1
  •  3
  •   T.J. Crowder    14 年前

    mousedown 没有自动重复,但可以通过 setInterval 然后把它关掉 mouseup 通过 clearInterval . 例如。:

    $(document).ready(function(){
        var addHandle, addTarget;
    
        addHandle = 0;
    
        $('button')
            .mousedown(function(){
                if (!addHandle) {
                    addTarget = $(this);
                    addHandle = setInterval(doTheAdd, 250); // Or whatever interval you want
                }
            })
            .bind('mouseup mouseleave', (function(){
                if (addHandle) {
                    clearInterval(addHandle);
                    addHandle = 0;
                    addTarget = undefined;
                }
            });
    
        function doTheAdd() {
            if (addTarget) {
                addTarget.after('<input type="checkbox">');
            }
        }
    });
    

    一定要测试你的目标浏览器,我不会 100% 肯定有些人不吃 鼠标按下 松开鼠标 在按钮上。

    编辑 向詹迪大声呼喊 mouseleave ,编辑以上内容以使用它。

        2
  •  2
  •   stagas    14 年前

    试试这个:

    $(document).ready(function(){
       var checkInterval;
       $('button').mousedown(function(){
         var me=this;                              // store 'this' button
         checkInterval=setInterval(function() {
           $(me).after('<input type="checkbox">'); // add checkbox after button...
         }, 200);                                  // ...every 200ms on mousedown
       }).bind('mouseup mouseleave', function() {  // bind on mouseup or mouseleave
         clearInterval(checkInterval);             // stop adding checkboxes
       });
    });