如何处理 div 中调整大小的开始？

Question

我试图在拖动开始时调用一个函数，但我不能，这个 div 无法处理调整大小图标区域上的单击或 mousedown 事件，所以我不得不在 mouseover 事件上处理它。

http://jsfiddle.net/PLBT6/

HTML

<div>hey</div>

CSS

div{
    width:30%;
    border:4px solid green;
    resize:horizontal;
    overflow:hidden;
}

Javascript

$("div").on("mousemove.resizer",function(e) {
    var draggingstarted = false;
    var bottom = $(this).offset().top + $(this).outerHeight();
    var right = $(this).offset().left + $(this).outerWidth();

    if (e.pageY<bottom-3 && e.pageY>bottom-16
        && e.pageX<right-3 && e.pageX>right-16){
        if (draggingstarted){
            console.log("started dragging");
        } else if (e.which==1) draggingstarted=true; //left click
        //else if (e.which==0) draggingstarted=false; //no clicks
        console.log(e.which, draggingstarted);
    }
});

Answer 1

好的，我做到了：

http://jsfiddle.net/PLBT6/1/

var ready = false; //entered with no clicks
$("div").on("mousemove",function(e) {
    var bottom = $(this).offset().top + $(this).outerHeight();
    var right = $(this).offset().left + $(this).outerWidth();

    if (e.pageY<bottom-3 && e.pageY>bottom-16 && e.pageX<right-3 && e.pageX>right-16){
        if (e.which==1 && ready) {console.log("drag started");ready=false;} //left click
        else if (e.which==0) {console.log("ready");ready=true;} //no clicks
    } else ready=false;
});
$("div").on("mouseout",function(e) {
    ready=false;
});