在JS Event Listener中传递Param并访问Event

Pass Param and access Event in JS Event Listener

本文关键字：Event Param 访问 JS Listener      更新时间：2024-05-28

我有我的画布，点击时会提醒您点击的位置。这很好，但现在我想将一个参数传递给函数domouseDown，同时也可以访问事件以获取点击位置（event.pageX）。我已经通过将事件Listener更改为function（）｛domouseDown（param）；｝成功地将一个参数传递给了函数，但随后event.pageX和y不再工作。我需要两者都得到，但我似乎只能得到其中一个来工作。

<canvas id="canvas" width="1000" height="400"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.addEventListener("mousedown", doMouseDown, false);
//Or  canvas.addEventListener("mousedown", function(){doMouseDown(param); }, false);
function doMouseDown(event) {
    //or function doMouseDown(event, param){
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;
    do {
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    }
    while (currentElement = currentElement.offsetParent)
    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;
    alert("x" + canvasX + " " + "y:" + canvasY);
}

我不确定是否理解，但这是您需要的吗？

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.addEventListener("mousedown", createEventWithParam("MyParam"), false);
function createEventWithParam(param) {
    return function doMouseDown(event){
        var totalOffsetX = 0;
        var totalOffsetY = 0;
        var canvasX = 0;
        var canvasY = 0;
        var currentElement = this;
        do{
            totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
            totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
        }
        while(currentElement = currentElement.offsetParent)
        canvasX = event.pageX - totalOffsetX;
        canvasY = event.pageY - totalOffsetY;
        alert("x" + canvasX + " " + "y:" + canvasY + " - " + param);
    }
}

这是一种使用参数创建事件处理程序的方法。

相关文章：