Нажатие левой кнопки мышки берет элемент изображения, а должен быть элемент формы

Question

Есть форма со внутреней логикой - при наведении на картинку поверх неё показывается текст.
Это реализовано через <input type="image" onClick = this.form.submit>

Проблема - при нажатии левой кнопкой мышки, браузер распознает эту форму как изображение и при открытии элемента в новом окне - открывает там картинку. А должен - форму)

Как это починить? Нужно чтобы и старая логика работала - при наведении на картинку появлялся элемент поверх неё, при клике на картинку форма сабмитилась, но нужно чтобы и при клике на картинку правой кнопкой мыши вылезало браузерное меню формы(открыть в новом окне), а не картинки(открыть картинку в новом окне)

<div class="col-3" onmouseover="document.getElementById('@divID').style.display = 'block';" onmouseout="document.getElementById('@divID').style.display = 'none';">
  <form asp-action="AddComment" asp-controller="Comments" method="post" enctype="multipart/form-data">
    <div class="box maintxt">
      <input style="box-shadow: 1px 1px 5px black;" type="image" alt="Submit Form" src="https://previews.123rf.com/images/vera1703/vera17031811/vera1703181100083/114147510-two-green-strips-of-ram-for-a-computer-isolated.jpg" onclick="this.form.submit" class="img-fluid goodBoxShadow rounded" width="175" height="250">
      <div id="@divID" style="background-color: red; display: none; pointer-events: none;" class="overlay-text absFullSize">
        <div class="mh-100 overflow-hidden border-0 textFade" style="--gradient:linear-gradient(transparent 150px, red);">

          <div class="bootstrapp-card-body overflow-hidden border-0" style="background-color: red">

            <h11 class="text-left font-italic text-white shadowTextBlack">Текст который появлется при наведении мышкой</h11>

          </div>
        </div>
      </div>

    </div>
  </form>
</div>

Добавлено позже: Для уточнения прикрепляю картинку, слева - то что выходит при левом клике на мою картинку, справа - то что мне нужно.

Answer 1

Думаю вам нужно перехватить событие onContextMenu и далее его обрабатывать выводя своё меню, вот пример кода, при onContextMenu мы получаем id элемента на котором произошло событие для дальнейшего использования(в том числе можно отобразить в контектном меню так как мы делаем это до его показа).

  var menu = document.querySelector('.menu');
  var selectedId = ''; // переменная для id

  function showMenu(x, y){
    menu.style.left = `${x}px`;
    menu.style.top = `${y}px`;
    menu.classList.add('show-menu');
  }
  function hideMenu(){
    menu.classList.remove('show-menu');
  }
  function onContextMenu(e){
    // запоминаем id элемента на котором вызвали контекстное меню
    selectedId = e.target.id;
    e.preventDefault();
    showMenu(e.pageX, e.pageY);
    document.addEventListener('mousedown', onMouseDown, false);
  }
  function onMouseDown(e){
    if (e.target.id === "open-new-window"){
      alert("если выбрано меню открываем в новой вкладке");
      //window.open(`https://www.google.com/search?q=${selectedId}`); 
    }
    hideMenu();
    document.removeEventListener('mousedown', onMouseDown);
  }
  document.addEventListener('contextmenu', onContextMenu, false);

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    
.container{left:0;margin:auto;position:absolute;top:20%;width:100%;text-align:center}.menu{position:absolute;width:230px;padding:2px;margin:0;border:1px solid #bbb;background:#eee;background:-webkit-linear-gradient(to bottom,#fff 0,#e5e5e5 100px,#e5e5e5 100%);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;-webkit-transform:translate(0,15px) scale(.95);transform:translate(0,15px) scale(.95);transition:transform .1s ease-out,opacity .1s ease-out;pointer-events:none}.menu-item{display:block;position:relative;margin:0;padding:0;white-space:nowrap}.menu-btn{background:0 0;line-height:normal;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:block;width:100%;color:#444;font-family:Roboto,sans-serif;font-size:13px;text-align:left;cursor:pointer;border:1px solid transparent;white-space:nowrap;padding:6px 8px;border-radius:3px}.menu-btn::-moz-focus-inner{border:0;padding:0}.menu-text{margin-left:25px}.menu-btn .fa{position:absolute;left:8px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.menu-item:hover>.menu-btn{color:#fff;outline:0;background-color:#2e3940;background:-webkit-linear-gradient(to bottom,#5d6d79,#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 .menu{top:4px;left:99%}.menu-item:hover>.menu,.show-menu{opacity:1;-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1);pointer-events:auto}.menu-item:hover>.menu{-webkit-transition-delay:.1s;transition-delay:.3s}

  </style>
</head>
<body>
<menu class="menu">
  <li class="menu-item">
    <button type="button" class="menu-btn">
      <span id="open-new-window" class="menu-text">Открыть в новой вкладке</span>
    </button>
  </li>
</menu>

<div class="col-3" onmouseover="document.getElementById('@divID').style.display = 'block';" onmouseout="document.getElementById('@divID').style.display = 'none';">
  <form asp-action="AddComment" asp-controller="Comments" method="post" enctype="multipart/form-data">
    <div class="box maintxt">
      <input id="oneID" oncontextmenu='return true;' style="box-shadow: 1px 1px 5px black;" type="image" alt="Submit Form" src="https://previews.123rf.com/images/vera1703/vera17031811/vera1703181100083/114147510-two-green-strips-of-ram-for-a-computer-isolated.jpg" onclick="this.form.submit" class="img-fluid goodBoxShadow rounded" width="175" height="250">
      <div id="@divID" style="background-color: red; display: none; pointer-events: none;" class="overlay-text absFullSize">
        <div class="mh-100 overflow-hidden border-0 textFade" style="--gradient:linear-gradient(transparent 150px, red);">
          <div class="bootstrapp-card-body overflow-hidden border-0" style="background-color: red">
            <h11 class="text-left font-italic text-white shadowTextBlack">Текст который появлется при наведении мышкой</h11>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
</body>
</html>

Без создания меню:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title></title>

</head>
<body>
<div class="col-3">
  <form asp-action="AddComment" asp-controller="Comments" method="post" enctype="multipart/form-data">
    <div class="box maintxt">
      <a href="https://google.com" onmouseover="document.getElementById('@divID').style.display = 'block';" onmouseout="document.getElementById('@divID').style.display = 'none';">
      <input id="oneID" oncontextmenu='return true;' style="box-shadow: 1px 1px 5px black;" type="image" alt="Submit Form" src="https://previews.123rf.com/images/vera1703/vera17031811/vera1703181100083/114147510-two-green-strips-of-ram-for-a-computer-isolated.jpg" onclick="this.form.submit" class="img-fluid goodBoxShadow rounded" width="175" height="250">
      </a>
      <div id="@divID" style="background-color: red; display: none; pointer-events: none;" class="overlay-text absFullSize">
        <div class="mh-100 overflow-hidden border-0 textFade" style="--gradient:linear-gradient(transparent 150px, red);">
          <div class="bootstrapp-card-body overflow-hidden border-0" style="background-color: red">
            <h11 class="text-left font-italic text-white shadowTextBlack">Текст который появлется при наведении мышкой</h11>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

</body>
</html>

Answer 2

Вот так вот можно сделать..
Используя position: absolute; и *z-index: **;
За место ссылки можете поставить то, что вам нужно.
Суть в том, что будет перекрытие слоёв. Когда вы будете нажимать на картинке её на самом деле будет закрывать другой слой. Который выше на z-index: 1 или 2...;
Ну и каждый такой элемент (комбинацию элементов a, form) с перекрытием просто оборачиваем в отдельный бокс и другие так-же, дальше эти боксы позиционируем как вам нужно.

.moto {
  background-size: cover;
  position: absolute;
  z-index: 0;
  width: 200px;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  z-index: 1;
  cursor: auto;
}

<a href="#" class="box"></a>
<form action="">
    <img class="moto" src="https://sun9-14.userapi.com/fYL5s_GDK8mAx7ehR7TLtvD8VwQmnQq1Q5JiLg/XQiUfIWNup8.jpg" alt="">
</form>

Answer 3

Вот вам контекст меню с открытием ссылки в новой вкладке

<div class="col-3" onmouseover="document.getElementById('@divID').style.display = 'block';" onmouseout="document.getElementById('@divID').style.display = 'none';">
  <form asp-action="AddComment" asp-controller="Comments" method="post" enctype="multipart/form-data">
    <div class="box maintxt">

<!--> Добавил ссылку <-->
<!--> В атрибуте href укажите ссылку которая вас интересует. <-->
      <a href="https://u.to/kXMrGw">
<input style="box-shadow: 1px 1px 5px black;" type="image" alt="Submit Form" src="https://previews.123rf.com/images/vera1703/vera17031811/vera1703181100083/114147510-two-green-strips-of-ram-for-a-computer-isolated.jpg" onclick="this.form.submit" class="img-fluid goodBoxShadow rounded" width="175" height="250">
</a>
      <div id="@divID" style="background-color: red; display: none; pointer-events: none;" class="overlay-text absFullSize">
        <div class="mh-100 overflow-hidden border-0 textFade" style="--gradient:linear-gradient(transparent 150px, red);">

          <div class="bootstrapp-card-body overflow-hidden border-0" style="background-color: red">

            <h11 class="text-left font-italic text-white shadowTextBlack">Текст который появлется при наведении мышкой</h11>

          </div>
        </div>
      </div>

    </div>
  </form>
</div>

БЛОГ НА HUSL

Нажатие левой кнопки мышки берет элемент изображения, а должен быть элемент формы

Ответы (3 шт):