TypeError：$（...）。addEventListener不是一个函数

Question

setTimeout(function() {
        $.ajax({
        url : "handlers/H_AnnotationHandler.php",
        data : "case_id=<?=$case_id?>&plink=<?=$plink?>&mode=get",
        type : "post",
        dataType : "json",
        success : function (response) {
            if (!response.error) {
                annotation_length = response.annots.length;
                for (var i = 0; i < response.annots.length; i++) {
                    var elt  = document.createElement("div");
                    elt.id = "runtime-overlay" + i;
                    elt.className = "highlight";
                    viewer.addOverlay({
                        element: elt,
                        location : viewer.viewport.imageToViewportRectangle(parseInt(response.annots[i].rect_x), parseInt(response.annots[i].rect_y), parseInt(response.annots[i].rect_w), parseInt(response.annots[i].rect_h))
                    });
                    $("#runtime-overlay"+i).attr("onclick", "$.clickOverlay('"+i+"')");
                }
            }               
        }
    });
    }, 3000);

    $.clickOverlay = function(whichOverlay) {
            var flag = 0;
            $("#runtime-overlay"+whichOverlay).addEventListener("mousedown", function(){
                flag = 0;
            }, false);
            $("#runtime-overlay"+whichOverlay).addEventListener("mousemove", function(){
                flag = 1;
            }, false);
            $("#runtime-overlay"+whichOverlay).addEventListener("mouseup", function(){
                if(flag === 0){
                    console.log("click");
                }
                else if(flag === 1){
                    console.log("drag");
                }
            }, false);
    }

为什么我收到addeventlistener的类型错误？您能帮我吗，我尝试了解单击或拖动。所以我在点击事件中添加了该功能： 如何区分鼠标的“点击”和“拖动”

错误：未被捕获的TypeError：$（...）。addEventListener不是一个函数

Answer 1

正如评论指出的那样，您正在尝试使用“香草” javascript方法在jQuery对象上添加事件监听器。

$.clickOverlay = function(whichOverlay) {
        var flag = 0;
        $("#runtime-overlay"+whichOverlay).addEventListener("mousedown", function(){
            flag = 0;
        }, false);
        $("#runtime-overlay"+whichOverlay).addEventListener("mousemove", function(){
            flag = 1;
        }, false);
        $("#runtime-overlay"+whichOverlay).addEventListener("mouseup", function(){
            if(flag === 0){
                console.log("click");
            }
            else if(flag === 1){
                console.log("drag");
            }
        }, false);
}

而是尝试：

$.clickOverlay = function(whichOverlay) {
        var flag = 0;
        $("#runtime-overlay"+whichOverlay).on("mousedown", function(){
            flag = 0;
        });
        $("#runtime-overlay"+whichOverlay).on("mousemove", function(){
            flag = 1;
        });
        $("#runtime-overlay"+whichOverlay).on("mouseup", function(){
            if(flag === 0){
                console.log("click");
            }
            else if(flag === 1){
                console.log("drag");
            }
        });
}

Answer 2

addEventListener是侦听事件的 javascript 方式，但您在 JQuery 对象上调用它。看看JQuery.on()使用 JQuery 管理事件。