onclick函數沒有被調用？ -沒有錯誤

Question

我正在定義為每個新會話創建的Session類。

在window.onload ，Session對象具有鼠標單擊事件偵聽器，單擊時將觸發處理程序，並1.檢查是否單擊了錨標記並​​保存href 2.保存鼠標單擊的x和y。

問題： 功能user.onclick無法正常工作。 不調用anchorLinkClickHandler（）; 或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事件。 單擊事件將在mousedown和mouseup事件之后發生。

您將必須先創建一個HTML元素，然后單擊該元素，您必須執行一個執行所有所需操作的函數。

HTML：

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

JavaScript的：

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