SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy How to prevent an addEventListener from disabling itself ?

    I am working on a greasemonkey script and in order to call functions when I mouseover any link I loop through them all and then add an addEventListener to each of them, pointing to an update menu function that positions a DIV at the links position and makes it visible.

    However, addEventListener is becoming disabled if I attempt to update the menu. though it stays enabled if you just pop-up an alert message, this behavior is without any wish or request on my behalf.

    This is the basic functionality to show how the menu is supposed to update, I have stripped out any irrelevant stuff, in the finished version a shortcut key combination will be pressed enabling/disabling the menu.
    Code:
    // ==UserScript==
    // @name          MENU SCRIPT
    // @namespace     http://example.com/
    // @description	  broken ;(
    // @include       *
    // ==/UserScript==
    
    
    (function() {
    
    var MENU_EXIST = false;
    var MENU_ARRAY = new Array();
    MENU_ARRAY[0]="item 2";
    MENU_ARRAY[1]="item 1";
    
    
     // insert anchor menu show code
     var allHref, ThisHref;
     allHref = document.getElementsByTagName('a');
     for (var i = 0; i < allHref.length; i++) {
        ThisHref = allHref[i];
        ThisHref.addEventListener('mouseover', function(event) {UPDATE_MENU(this);}, true);
     }
    
    
    function MAKE_MENU() {
    
      // Make floating DIV Menu
      menuString = '<div id="menu" style="align: left;background-color: #FFFFFF;position:absolute; top:0px;float: left; width:auto; height:auto;">';
      for (var i = 0; i < MENU_ARRAY.length; i++) {
        menuString += '<a href="javascript:URI(\''+MENU_ARRAY[i]+'\');" style="text-decoration: none;font-size: 12px;font-weight: bold;color:#000000;">&nbsp;&nbsp;&nbsp;'+MENU_ARRAY[i]+'&nbsp;&nbsp;&nbsp;</a><br>';
      }
      menuString += '</div>';
      document.body.innerHTML  += menuString;
      MENU_EXIST = true;
    }
    
    function FIND_ELEMENT_SCREEN_POSITION(obj){
    // Get the anchors position
    var posX = obj.offsetLeft;var posY = obj.offsetTop;
    while(obj.offsetParent){
    if(obj==document.body){break}
    else{
    posX=posX+obj.offsetParent.offsetLeft;
    posY=posY+obj.offsetParent.offsetTop;
    obj=obj.offsetParent;
    }
    }
    var posArray=[posX,posY];
    return posArray;
    }
    
    function UPDATE_MENU(obj) {
    // Update the position & create the menu if needed
    alert("menu called!");
    
    var posArray = FIND_ELEMENT_SCREEN_POSITION(obj);
    px = posArray[0];py = posArray[1];
    
    if (!MENU_EXIST) {MAKE_MENU();} // make menu if doesn not exist
    var vivm = document.getElementById('menu');
    vivm.style.left=px+1+'px';
    vivm.style.top=py+'px';
    
    SHOW_MENU(); // Show it
    }
    
    function HIDE_MENU()
    { // Make Menu InVisible
    var menu = document.getElementById('menu');
    menu.style.visibility = 'hidden';
    }
    
    function SHOW_MENU()
    { // Make Menu Visible
    var menu = document.getElementById('menu');
    menu.style.visibility = 'visible';
    }
    
    })();
    If you strip out the UPDATE_MENU code like this it executes the code on every mouseover like I want, but I just can't figure out whats going wrong.
    Code:
    function UPDATE_MENU(obj) {
    // Update the position & create the menu if needed
    alert("menu called!");
    /*
    var posArray = FIND_ELEMENT_SCREEN_POSITION(obj);
    px = posArray[0];py = posArray[1];
    
    if (!MENU_EXIST) {MAKE_MENU();} // make menu if doesn not exist
    var vivm = document.getElementById('menu');
    vivm.style.left=px+1+'px';
    vivm.style.top=py+'px';
    
    SHOW_MENU(); // Show it
    */
    }
    any idea's?.
    Thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It's not a good idea to place a separate event on every anchor. Instead, place just one event at the top of the document (on the body tag) and filter for the conditions you require.

    Code javascript:
    function monitorMouseover(evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (targ.nodeType === 1 && targ.nodeName === 'A') {
            // do stuff with mouseover on anchor 
        }
    }
    Last edited by paul_wilkins; Aug 28, 2008 at 15:00.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, Think that was the reason for my troubles, changed the make menu code to a document.createElement version too, I am a complete noob at javascript, C++ & PHP is my usual cup of tea, Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •