Detailed explanation of the title attribute in jQuery that causes the mousedown event to be triggered and the mousemove event to be triggered simultaneously.

As we all know, the execution process of the entire event of mouse click is: mousedown -> mouseup -> click, and the entire process of drag and drop is: mousedown -> mousemove -> mouseup -> click

　You can see a normal demo, you can test the click and drag-and-drop actions separately

$(function(){    //初始化 box 位置
    $('#box').css('left', ($(window).width() - 100) / 2).css('top', ($(window).height() - 100) / 2).show();    var x = y = 0;    var isMove = false;
    $('#box').mousedown(function(e){
        x = e.clientX - $('#box').offset().left;
        y = e.clientY - $('#box').offset().top;
        $(document).mousemove(function(e){
            $('#tip').text('你触发了 mousemove 事件');
            isMove = true;
            l = e.clientX - x;
            t = e.clientY - y;
            $('#box').css('left', l).css('top', t);
        }).mouseup(function(){
            $(document).unbind('mousemove').unbind('mouseup');
        });
    });
    $('#box').click(function(e){        if(!isMove){
            $('#tip').text('你触发了 click 事件');
        }
        isMove = false;
    });
});

　We try to add the titleattribute to #box and then separate them Try click events and drag-and-drop events

$(function(){    //初始化 box 位置
    $('#box').css('left', ($(window).width() - 100) / 2).css('top', ($(window).height() - 100) / 2).show();    var x = y = 0;    var isMove = false;
    $('#box').mousedown(function(e){
        x = e.clientX - $('#box').offset().left;
        y = e.clientY - $('#box').offset().top;
        $(document).mousemove(function(e){
            $('#tip').text('你触发了 mousemove 事件');
            isMove = true;
            l = e.clientX - x;
            t = e.clientY - y;
            $('#box').css('left', l).css('top', t);
        }).mouseup(function(){
            $(document).unbind('mousemove').unbind('mouseup');
        });
    });
    $('#box').click(function(e){        if(!isMove){
            $('#tip').text('你触发了 click 事件');
        }
        isMove = false;
    });
});

You can find that clicking will also trigger the mousemove event because of the title.

And the title attribute has a characteristic, that is, when you press the mouse, the prompt text will be hidden, and then it will be displayed again when you raise the mouse, so you can try double-clicking, and you will find that the second click will trigger click event, because the second click is made before the title is displayed after the first click, the click event is triggered normally.

After discovering this, we can try to avoid this small problem, because in some cases, an object may need to have both drag-and-drop and click functions, and ensure that these two Functions will not conflict. The simplest way is to avoid using the title attribute, or you can refer to my implementation in HoorayOS:

Record the coordinates of the object during mousedown and mouseup respectively, and compare them. If they are completely consistent, it means that the object has not been moved. Drag, otherwise it means that the object has been dragged. At this time, you can handle these two situations separately in mouseup.

　PS: This problem is currently only found under chrome, and does not seem to appear in other browsers.

The above is the detailed content of Detailed explanation of the title attribute in jQuery that causes the mousedown event to be triggered and the mousemove event to be triggered simultaneously.. For more information, please follow other related articles on the PHP Chinese website!