Question

我正在为每个新会话定义一个类Session。

在window.onload中，Session对象有一个鼠标单击事件监听器，在单击时，它会触发处理程序，并且1.检查是否单击了锚标记并保存href 2.保存鼠标单击的x和y。

问题： 函数user.onclick无效。不调用anchorLinkClickHandler（）; OR window.addEventListener，即保存x和y的click事件处理程序。没有错误。我认为下面的代码有一个语法问题..不知道是什么。想法？

如图所示（在window.onload中）：

var user = new UserSession('001');

user.onclick = function(event) {

// check if an anchor tag link is clicked, if so, save the href.
        user.aTagHref = anchorLinkClickHandler();

        // CLICK event listener - save the x and  y of mouse click
        window.addEventListener("load", function(event){    
            document.body.addEventListener("click", handleClick)
        });
}

以下是完整代码：

  function UserSession(campaignId) {
  this.campaignId = campaignId;
  var aTagHref = aTagHref;

  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };

  // get the position of click - Event Listener Function
  this.getPosition = function(el) {
          var xPosition = 0;
          var yPosition = 0;
         
          while (el) {
            if (el.nodeName == "BODY") {
              // deal with browser quirks with body/window/document and page scroll
              var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft;
              var yScrollPos = el.scrollTop || document.documentElement.scrollTop;
         
              xPosition += (el.offsetLeft - xScrollPos + el.clientLeft);
              yPosition += (el.offsetTop - yScrollPos + el.clientTop);
            } else {
              xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
              yPosition += (el.offsetTop - el.scrollTop + el.clientTop)
            }
         
            el = el.offsetParent;
          }
          return {
            x: xPosition,
            y: yPosition,
            a: "hahah",
          };
    };

    // On click handler
    this.handleClick = function(event) {
        // Return the current element clicked on
        var el = event.currentTarget;
        // Return the offset values of the element clicked on   
        var relOffsetValues = getPosition(el);


        // Find the true value of x and y by adding the offset and the to clicked value of x and y
        var realValueX = (relOffsetValues.x + event.clientX );
        var realValueY = (relOffsetValues.y + event.clientY);

        // display the x and y of the mouse click
        alert("Clicks x:" + realValueX + ", y:" + realValueY);
        // alert("clientx:" + event.clientX + ", real valie:" + realValueX);
    }

    // On click ANCHOR TAGS SAVE THEM
    // Anchor Tags - Capture the href of the link clicked
    this.anchorLinkClickHandler = function() {
        var aTags = document.getElementsByTagName('a');

        for (var i = aTags.length - 1; i >= 0; --i) {
            aTags[i].onclick = function() {
            aTagHref[i] = this.getAttribute("href");
                alert(aTagHref);
            };
        }
    }

 // END OF CLASS 
}

Window.onload函数（调用所有内容）

window.onload = function（）{

var user = new UserSession('001');

user.onclick = function(event) {
    // check if an anchor tag link is clicked, if so, save the href.
        user.aTagHref = anchorLinkClickHandler();

        // CLICK event listener - save the x and  y of mouse click
        window.addEventListener("load", function(event){    
            document.body.addEventListener("click", handleClick)
        });
}

    // SCROLL Event Listener
    // Get the x and y of the scroll
    window.addEventListener("scroll", function(event) {
         // document.getScroll= function(){
             var sx, sy;
             if(window.pageYOffset!= undefined){
                sx = pageXOffset;
                sy = pageYOffset;
                 console.log(sx +" if " + sy);
              // return [pageXOffset, pageYOffset];
             }
             else{
               var d= document, r= d.documentElement, b= d.body;
              sx= r.scrollLeft || b.scrollLeft || 0;
              sy= r.scrollTop || b.scrollTop || 0;
              console.log(sx +" else " + sy);
              // return [sx, sy];
             }
        // }
    });
};

Answer 1

看看https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick以便更好地理解。

当用户点击元素时，会引发click事件。 click事件将在mousedown和mouseup事件之后发生。

首先必须创建一个HTML元素，当单击该元素时，您必须执行一个执行所需操作的函数。

HTML：

<button id="btn">Click me</button>

JavaScript：

document.querySelector("#btn").onclick = function(event) {
 // do things here
}

onclick函数没被调用？ - 没有错误

1 个答案: