CODEWITHSUNDEEP
javascripthtml
MarkWriteCodes
MarkWriteCodes

Reputation: 133

Onmousedown does not allow me to click a link

I try to build a context menu on right click, and it works well, except for one thing. In my li item, I have some links (href). But if I click on these links, the context menu doesn't follow the href, but simply closes the context menu.

I'm doing something wrong but I can't see the error:

My actual code:


 const menu = document.querySelector('.menu');
  
  function showMenu(x, y) {
    menu.style.left = x + 'px';
    menu.style.top = y + 'px';
    menu.classList.add('menu-show');
  }

  function hideMenu() {
    menu.classList.remove('menu-show');
  }

  function onContextMenu(e) {
    e.preventDefault();
    showMenu(e.pageX, e.pageY);
    document.addEventListener('mousedown', onMouseDown, false);
  }

  function onMouseDown(e) {
    hideMenu();
    document.removeEventListener('mousedown', onMouseDown);
  }

  document.addEventListener('contextmenu', onContextMenu, false);
});

HTML:


<ul class="menu">
    <li class="menu-item">
        <a href="https://flarum.it" class="menu-btn">
            <i class="fa fa-folder-open"></i>
            <span class="menu-text">Open</span>
        </a>
    </li>
</ul>

Upvotes: 1

Views: 315

Answers (1)

BOZ
BOZ

Reputation: 2020

Clicking a link event occurs along with the onmouseup event. You are already making this process impossible with onmousedown.

All you have to do is listen for the mouseup event instead of the mousedown event and perhaps change the name of your "onMouseDown" function to "onMouseUp".

document.addEventListener('mouseup', onMouseUp, false);

Example code snippet

var menu = document.querySelector('.menu');

function showMenu(x, y){
    menu.style.left = x + 'px';
    menu.style.top = y + 'px';
    menu.classList.add('menu-show');
}

function hideMenu(){
    menu.classList.remove('menu-show');
}

function onContextMenu(e){
    e.preventDefault();
    showMenu(e.pageX, e.pageY);
    document.addEventListener('mouseup', onMouseUp, false);
}

function onMouseUp(e){
    hideMenu();
    document.removeEventListener('mouseup', onMouseUp);
}

document.addEventListener('contextmenu', onContextMenu, false);
/* Page */

html {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #fff 0%, #a6b9c1 100%) no-repeat;
}

.container {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    margin: auto;
    text-align: center;
}

h1,
h2 {
    color: #555;
}

/* Menu */

.menu {
    position: absolute;
    width: 200px;
    padding: 2px;
    margin: 0;
    border: 1px solid #bbb;
    background: #eee;
    background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
    z-index: 100;
    border-radius: 3px;
    box-shadow: 1px 1px 4px rgba(0,0,0,.2);
    opacity: 0;
    transform: translate(0, 15px) scale(.95);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    pointer-events: none;
}

.menu-item {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.menu-btn { 
    display: block;
    color: #444;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 3px;
}

button.menu-btn {
    background: none;
    line-height: normal;
    overflow: visible;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    width: 100%;
    text-align: left;
}

a.menu-btn {
    outline: 0 none;
    text-decoration: none;
}

.menu-text {
    margin-left: 25px;
}

.menu-btn .fa {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.menu-item:hover > .menu-btn { 
    color: #fff; 
    outline: none; 
    background-color: #2E3940;
    background: linear-gradient(to bottom, #5D6D79, #2E3940);
    border: 1px solid #2E3940;
}

.menu-item-disabled {
    opacity: .5;
    pointer-events: none;
}

.menu-item-disabled .menu-btn {
    cursor: default;
}

.menu-separator {
    display:block;
    margin: 7px 5px;
    height:1px;
    border-bottom: 1px solid #fff;
    background-color: #aaa;
}

.menu-item-submenu::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #808080; 
}

.menu-item-submenu:hover::after {
    border-left-color: #fff;
}

.menu .menu {
    top: 4px;
    left: 99%;
}

.menu-show,
.menu-item:hover > .menu {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    pointer-events: auto;
}

.menu-item:hover > .menu {
    transition-delay: 300ms;
}
<ul class="menu">
    <li class="menu-item">
        <a href="https://google.com" class="menu-btn">
            <i class="fa fa-folder-open"></i>
            <span class="menu-text">Open</span>
        </a>
    </li>
</ul>

Upvotes: 1

Related Questions