Delete context-menu items from code

Question

Is there a way to delete a default item (e.g. the "Open in a new tab" when right-clicking on an anchor element) in the context-menu of a specific html page?

If this is not possible, can you tell me how to show a custom menu, after it has been inhibited the displaying of the default by means of "contextmenu" event and "preventDefault()"?

Edit: the second part of the question may be considered as a duplicate of this preceeding question but not the @Menon answer.

Possible duplicate of [Making custom right-click context menus for my web-app](http://stackoverflow.com/questions/4495626/making-custom-right-click-context-menus-for-my-web-app) — Bento, Apr 26 '16 at 13:00

score 1 · Accepted Answer · edited May 23 '17 at 12:07

You may not be able to hide (not show) "Open in new tab" option for a link.

If you are asking for custom right-click context menus then its a duplicate.

Here is a demo I made for your reference :

(function() {

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

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

  
  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;

  function init() {
    contextListener();
    clickListener();
    keyupListener();
    resizeListener();
  }

  function contextListener() {
    document.addEventListener("contextmenu", function(e) {
      taskItemInContext = clickInsideElement(e, taskItemClassName);

      if (taskItemInContext) {
        e.preventDefault();
        toggleMenuOn();
        positionMenu(e);
      } else {
        taskItemInContext = null;
        toggleMenuOff();
      }
    });
  }

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

  
  function keyupListener() {
    window.onkeyup = function(e) {
      if (e.keyCode === 27) {
        toggleMenuOff();
      }
    }
  }

  
  function resizeListener() {
    window.onresize = function(e) {
      toggleMenuOff();
    };
  }

 
  function toggleMenuOn() {
    if (menuState !== 1) {
      menuState = 1;
      menu.classList.add(contextMenuActive);
    }
  }

 
  function toggleMenuOff() {
    if (menuState !== 0) {
      menuState = 0;
      menu.classList.remove(contextMenuActive);
    }
  }

  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";
    }
  }

  
  function menuItemListener(link) {
    console.log("Task ID - " + taskItemInContext.getAttribute("data-id") + ", Task action - " + link.getAttribute("data-action"));
    toggleMenuOff();
  }

  
  init();

})();

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
 *,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  color: #595959;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}
.container {
  margin: 0 auto;
  padding: 0 24px;
  max-width: 960px;
}
/* primary header */

.primary-header {
  padding: 24px 0;
  text-align: center;
  border-bottom: solid 2px #cfcfcf;
}
.primary-header__title {
  color: #393939;
  font-size: 36px;
}
.primary-header__title small {
  font-size: 18px;
  color: #898989;
}
/* content */

.content {
  padding: 48px 0;
  border-bottom: solid 2px #cfcfcf;
}
.content__footer {
  margin-top: 12px;
  text-align: center;
}
/* footer */

.primary-footer {
  padding: 24px 0;
  color: #898989;
  font-size: 14px;
  text-align: center;
}
/* tasks */

.tasks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.task {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: solid 1px #dfdfdf;
}
.task:last-child {
  border-bottom: none;
}
/* context menu */

.context-menu {
  display: none;
  position: absolute;
  z-index: 10;
  padding: 12px 0;
  width: 240px;
  background-color: #fff;
  border: solid 1px #dfdfdf;
  box-shadow: 1px 1px 2px #cfcfcf;
}
.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 {
  display: block;
  padding: 4px 12px;
  color: #0066aa;
  text-decoration: none;
}
.context-menu__link:hover {
  color: #fff;
  background-color: #0066aa;
}

<body>
  <header class="primary-header">
    <div class="container">
      <h1 class="primary-header__title">
        My Tasks App <small>using custom context menus</small>
      </h1>
    </div>
  </header>
  <main class="content">
    <div class="container">
      <ul class="tasks">
        <li class="task" data-id="3">
          <div class="task__content">
            Go To Grocery
          </div>
          <div class="task__actions">
            <i class="fa fa-eye"></i>
            <i class="fa fa-edit"></i>
            <i class="fa fa-times"></i>
          </div>
        </li>
        <li class="task" data-id="2">
          <div class="task__content">
            Type Some Code
          </div>
          <div class="task__actions">
            <i class="fa fa-eye"></i>
            <i class="fa fa-edit"></i>
            <i class="fa fa-times"></i>
          </div>
        </li>
        <li class="task" data-id="1">
          <div class="task__content">
            Build An App
          </div>
          <div class="task__actions">
            <i class="fa fa-eye"></i>
            <i class="fa fa-edit"></i>
            <i class="fa fa-times"></i>
          </div>
        </li>
      </ul>
    </div>
  </main>
  <footer class="primary-footer">
    <div class="container">
      <small>&copy; 2015 Context Menu Madness! Demo by Nick Salloum. <a href="building-custom-context-menu-javascript" target="_blank">See article </a></small>
    </div>
  </footer>
  <nav id="context-menu" class="context-menu">
    <ul class="context-menu__items">
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="View"><i class="fa fa-eye"></i> View Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Edit"><i class="fa fa-edit"></i> Edit Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Delete"><i class="fa fa-times"></i> Delete Task</a>
      </li>
    </ul>
  </nav>
</body>

If this is what you want then refer the duplicate question. But if you want to edit the menu displayed normally then I don't think there is a way to do that.

Good answer. Thank you. In Firefox there is an add-on to hide each item of each menu (MenuFilter: https://addons.mozilla.org/en-US/firefox/files/browse/426290/). So, at least in Firefox, there is a method. you can also customize by adding items to the default context-menu (https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/context-menu). But the method that you suggested is better, since it allows you to work directly on the document (in fact, I told 'specific'). I tried the snippet on Firefox, so it should work on this browser. I had not found the reference you have indicated. — Bento, Apr 26 '16 at 12:45
There are only two problem. The first (the major one) is that the parser seems not to be able to process the js line *var menuItems = document.querySelectorAll(".context-menu__item");* by replacing 'menu' with 'document' no error is encountred, but the menu does not appear, both the standard menu and the custom one. The second problem (the minor one) is that on a second clicking, the original menu of the system is shown. — Bento, Apr 26 '16 at 23:45
@Bento oh. I am not sure what the first problem is but the second one shouldn't happen. You are not supposed to get the "open in new tab, window, etc" — Ani Menon, Apr 27 '16 at 02:48
I was wrong. Just an error of putting the script before the HTML part.. The solution you proposed is perfect for me (the reference to the other answer you gave me indeed uses jquery on the 'SRC' attribute so doesn't work offline) — Bento, Apr 27 '16 at 18:40

Delete context-menu items from code

1 Answers1