0

我正在定义为每个新会话创建的类Sessiononclick函数没有被调用? - 无错误

window.onload,Session对象有一个鼠标点击事件监听器,点击后它触发处理器,并检查锚点标记是否被点击并保存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函数(其中一切称)

(){
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]; 
      } 
     // } 
    }); 
}; 
+1

你设置'user.onclick =函数(事件){...}'你的代码的开头,然后永不调用功能。 – gyre

+1

@gyre - 也许OP认为'onclick'在某种程度上是一个特殊的属性 - 它是......在HTMLElements上,但对常规对象没有超能力 –

+0

@JaromandaX好点。值得一提的是,'user'是'UserSession'自定义类的一个实例,因此是POJO(Plain Ol'JavaScript Object)。 – gyre

回答

0

看看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 
}