event.stopPropagation（）停止该事件的所有回调或停止调用脚本的功能

时间：2016-01-11 11:45:22

标签： javascript events callback

我有一个html页面，我在其中实现了上下文菜单.html页面在Div中有一个DIV。我已经成功实现了上下文菜单。

我正在使用上下文菜单插件脚本，当右键单击在类＆＃34; task＆＃34;上设置的内部div时调用该脚本。

现在确切的问题是我只想在内部div上下文菜单中选择选项，所以我用＆＃34; oncontextmenu＆＃34;设置css样式。事件也与外部div相同。

所以现在我设置的bigins问题＆＃34;显示：块＆＃34;右键单击内部div时表的第一行。我正在设置＆＃34;显示：无＆＃34;右键单击外部div时。

在内部div中单击时，它设置值＆＃34; display：block＆＃34;并且还运行外部div的onclick事件并再次将值设置为＆＃34; display：none＆＃34;。停止此操作我已尝试＆＃34; event.stopPropagation（）;＆＃34;，但之后我用它来停止从脚本中显示上下文菜单。

我创建了一个代码窗格Demo

我能理解这个问题可能非常具体，但想知道何时使用＆＃34; event.stopPropagation（）;＆＃34;在这种情况下允许上下文菜单和执行。

代码： HTML - 

    <body>

  <div style="width:100%;height:200px;background-color:red" oncontextmenu="menu('Outer');alert('Outer div Clicked\nSetting Css display:none');document.getElementById('open').style.display = 'none'" class="task">Outside
    <center><div  style="width:50%;height:100px;background-color:yellow" oncontextmenu="menu('Inner');alert('Inner div Clicked\nSetting Css display:block');document.getElementById('open').style.display = 'block';return false" class="task">Inside
    </div></center>
</div>
</div>
 <div class="context-menu">
    <table class="context-menu__item" style="width:auto">
      <tr class="context-menu__link open" id="open" style="display:none">
        <td style="width:30px">Open</td>       
      </tr>
      <tr class="context-menu__link close">
        <td style="width:30px">Close</td>      
      </tr>
       <tr class="context-menu__link edit">
        <td style="width:30px">Edit</td>      
      </tr>
    </table>

</body>

CSS：

.context-menu {
  display: none;
  position: absolute;
  z-index: 10;
  width:auto;
  background-color: #fff;
  border: solid 1px grey;
  box-shadow: 1px 1px 10px #cfcfcf;
  border-radius:5px;

}

.context-menu--active {
  display: block;
}

.context-menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-menu__item {
  display: block;
  margin-bottom: 4px;
}

.context-menu__item:last-child {
  margin-bottom: 0;
}

.context-menu__link {
  font-family:Verdana;
  font-size:11pt;
  display: block;
  padding: 3px 3px;
  color: black;
  text-decoration: none;
  width:auto;
  border-bottom:solid 1px #bfbfbf;
}

.context-menu__link:hover { 
  color: #fff;
  background-color:black;
  cursor:pointer; 
  border-radius:5px;
}

Java的脚本：

function menu() {
  "use strict";
  /**
   * Function to check if we clicked inside an element with a particular class
   * name.
   * 
   * @param {Object} e The event
   * @param {String} className The class name to check against
   * @return {Boolean}
   */
  function clickInsideElement( e, className ) {
    var el = e.srcElement || e.target;

    if ( el.classList.contains(className) ) {
      return el;
    } else {
      while ( el = el.parentNode ) {
        if ( el.classList && el.classList.contains(className) ) {
          return el;
        }
      }
    }

    return false;
  }

  /**
   * Get's exact position of event.
   * 
   * @param {Object} e The event passed in
   * @return {Object} Returns the x and y position
   */
  function getPosition(e) {
    var posx = 0;
    var posy = 0;

    if (!e) var e = window.event;

    if (e.pageX || e.pageY) {
      posx = e.pageX;
      posy = e.pageY;
    } else if (e.clientX || e.clientY) {
      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    return {
      x: posx,
      y: posy
    }
  } 
  /**
   * Variables.
   */
  var contextMenuClassName = "context-menu";
  var contextMenuItemClassName = "context-menu__item";
  var contextMenuLinkClassName = "context-menu__link";
  var contextMenuActive = "context-menu--active";

  var taskItemClassName = "task";
  var taskItemInContext;

  var clickCoords;
  var clickCoordsX;
  var clickCoordsY;

  var menu = document.querySelector(".context-menu");
  var menuItems = menu.querySelectorAll(".context-menu__item");
  var menuState = 0;
  var menuWidth;
  var menuHeight;
  var menuPosition;
  var menuPositionX;
  var menuPositionY;

  var windowWidth;
  var windowHeight;

  /**
   * Initialise our application's code.
   */
  function init() {
    contextListener();
    clickListener();
    keyupListener();
    resizeListener();
  }    
  /**
   * Listens for contextmenu events.
   */
  function contextListener() {
    document.addEventListener( "contextmenu", function(e) {
      taskItemInContext = clickInsideElement( e, taskItemClassName );

      if ( taskItemInContext ) {
        e.preventDefault();
        toggleMenuOn();
        positionMenu(e);
      } else {
        taskItemInContext = null;
        toggleMenuOff();
      }
    });
  }    
  /**
   * Listens for click events.
   */
  function clickListener() {
    document.addEventListener( "click", function(e) {
      var clickeElIsLink = clickInsideElement( e, contextMenuLinkClassName );

      if ( clickeElIsLink ) {
        e.preventDefault();
        menuItemListener( clickeElIsLink );
      } else {
        var button = e.which || e.button;
        if ( button === 1 ) {
          toggleMenuOff();
        }
      }
    });
  }    
  /**
   * Listens for keyup events.
   */
  function keyupListener() {
    window.onkeyup = function(e) {
      if ( e.keyCode === 27 ) {
        toggleMenuOff();
      }
    }
  }    
  /**
   * Window resize event listener
   */
  function resizeListener() {
    window.onresize = function(e) {
      toggleMenuOff();
    };
  }    
  /**
   * Turns the custom context menu on.
   */
  function toggleMenuOn() {
    if ( menuState !== 1 ) {
      menuState = 1;
      menu.classList.add( contextMenuActive );
    }
  }  
  /**
   * Turns the custom context menu off.
   */
  function toggleMenuOff() {
    if ( menuState !== 0 ) {
      menuState = 0;
      menu.classList.remove( contextMenuActive );
    }
  }   
  /**
   * Positions the menu properly.
   * 
   * @param {Object} e The event
   */
  function positionMenu(e) {
    clickCoords = getPosition(e);
    clickCoordsX = clickCoords.x;
    clickCoordsY = clickCoords.y;

    menuWidth = menu.offsetWidth + 4;
    menuHeight = menu.offsetHeight + 4;

    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;

    if ( (windowWidth - clickCoordsX) < menuWidth ) {
      menu.style.left = windowWidth - menuWidth + "px";
    } else {
      menu.style.left = clickCoordsX + "px";
    }

    if ( (windowHeight - clickCoordsY) < menuHeight ) {
      menu.style.top = windowHeight - menuHeight + "px";
    } else {
      menu.style.top = clickCoordsY + "px";
    }
  }

  /**
   * Dummy action function that logs an action when a menu item link is clicked
   * 
   * @param {HTMLElement} link The link that was clicked
   */
  function menuItemListener( link ) {
    console.log( "Task ID - " + taskItemInContext.getAttribute("data-id") + ", Task action - " + link.getAttribute("data-action"));
    toggleMenuOff();
  }    
  /**
   * Run the app.
   */
  init();   
}

对此的任何建议都将非常感激。

0 个答案:

没有答案
相关问题
最新问题