Javascript event.stopPropagation（）停止该事件的所有回调，或停止名为script'；s功能

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

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

确切的问题是，现在我只希望在内部div上下文菜单上选择选项，因此我正在使用“oncontextmenu”事件设置css样式，并且与外部div相同

现在的问题是，当右键单击内部div时，我正在为表的第一行设置“display:block”。当右键单击外部div时，我正在设置“display:none”

当在内部div中单击时，它会设置值“display:block”，并运行外部div的onclick事件，然后再次将值设置为“display:none”。要停止此操作，我尝试了“event.stopPropagation（）；”，但使用此选项后，它会停止从脚本中显示上下文菜单

我已经创建了一个代码窗格

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

代码： HTML-

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();   
}

功能菜单（）{
“严格使用”；
/**
*函数检查是否在具有特定类的元素中单击
*名字。
* 
*@param{Object}e事件
*@param{String}className要检查的类名
*@return{Boolean}
*/
函数clickInsideElement（e，类名）{
var el=e.src元素| | e.target；
if（el.classList.contains（className））{
返回el；
}否则{
while（el=el.parentNode）{
if（el.classList&&el.classList.contains（className））{
返回el；
}
}
}
返回false；
}
/**
*获取事件的确切位置。
* 
*@param{Object}e传入的事件
*@return{Object}返回x和y位置
*/
函数getPosition（e）{
var-posx=0；
var-posy=0；
如果（！e）var e=window.event；
如果（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；
}
返回{
x:posx，
y:波西
}
} 
/**
*变量。
*/
var contextMenuClassName=“上下文菜单”；
var contextMenuItemClassName=“上下文菜单项”；
var contextMenuLinkClassName=“上下文菜单链接”；
var contextMenuActive=“上下文菜单--活动”；
var taskItemClassName=“任务”；
var-taskItemInContext；
var-clickCoords；
var-clickCoordsX；
var-clickCoordsY；
var menu=document.querySelector（“.context menu”）；
var menuItems=menu.querySelectorAll（“.context-menu\uu项”）；
var menuState=0；
var menuWidth；
var menuHeight；
var menuPosition；
var menuPositionX；
var menuPositionY；
窗宽；
窗高；
/**
*初始化应用程序的代码。
*/
函数init（）{
contextListener（）；
单击侦听器（）；
keyupListener（）；
resizeListener（）；
}    
/**
*侦听上下文菜单事件。
*/
函数contextListener（）{
document.addEventListener（“上下文菜单”，函数（e）{
taskItemInContext=单击InsideElement（e，taskItemClassName）；
如果（taskItemInContext）{
e、 预防默认值（）；
toggleMenuOn（）；
位置菜单（e）；
}否则{
taskItemInContext=null；
切换Menuoff（）；
}
});
}    
/**
*侦听单击事件。
*/
函数clickListener（）{
文档.添加的列表器（“单击”，函数（e）{
var clickeElIsLink=clickInsideElement（e，contextMenuLinkClassName）；
如果（单击eElisLink）{
e、 预防默认值（）；
menuItemListener（单击eElisLink）；
}否则{
var按钮=e.哪个| | e.按钮；
如果（按钮===1）{
切换Menuoff（）；
}
}
});
}    
/**
*侦听键控事件。
*/
函数keyupListener（）{
window.onkeyup=函数（e）{
如果（例如keyCode===27）{
切换Menuoff（）；
}
}
}    
/**
*窗口调整事件侦听器
*/
函数resizeListener（）{
window.onresize=函数（e）{
切换Menuoff（）；
};
}    
/**
*打开自定义关联菜单。
*/
函数toggleMenuOn（）{
如果（菜单状态！==1）{
menuState=1；
menu.classList.add（contextMenuActive）；
}
}  
/**
*关闭自定义关联菜单。
*/
函数toggleMenuOff（）{
如果（菜单状态！==0）{
menuState=0；
menu.classList.remove（contextMenuActive）；
}
}   
/**
*正确定位菜单。
* 
*@param{Object}e事件
*/
功能位置菜单（e）{
单击Coords=getPosition（e）；
clickCoordsX=clickCoords.x；
clickCoordsY=clickCoords.y；
menuWidth=menu.offsetWidth+4；
menuHeight=menu.offsetHeight+4；
windowWidth=window.innerWidth；
windowHeight=window.innerHeight；
如果（（窗口宽度-单击坐标X）.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;
}

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();   
}