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

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

jquery

Reigel Gallarde · 技术社区 · 15 年前

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 回复 | 直到 15 年前

T.J. Crowder 15 年前

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 ,编辑以上内容以使用它。

stagas 15 年前

试试这个:

$(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
   });
});