Предотвращение дефолта при щелчке правой кнопкой мыши по изображению

#javascript #jquery

#javascript #jquery

Вопрос:

Возможно ли запустить событие щелчка правой кнопкой мыши по документу на изображении?

Это то, что я делал до сих пор, я могу отслеживать только событие щелчка правой кнопкой мыши по моему изображению

 <script type="text/javascript">
    $("#myImage").mousedown(function (event) {
        if (event.which == 3) {
           //I need Some code to fire Document right click event (or maybe a different method)
        }
    });
</script>
  

Спасибо за вашу помощь

Edit1: Что я точно хочу, так это когда я щелкаю правой кнопкой мыши по своему изображению, я хочу показать меню, а не меню правой кнопки мыши на изображении, но меню правой кнопки мыши документа, как будто изображения там нет или отключено, еще раз спасибо за вашу помощь 🙂

Редактирование 2: То, что я делал до сих пор, — это отключить событие щелчка правой кнопкой мыши с помощью preventDefault, теперь мне нужно отобразить меню:

 <script type="text/javascript">
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
//Need to display the menu
}, false);
</script>
  

Правка3:
Это сработало, спасибо, я создал свое собственное меню, конечно, было бы здорово, если бы у меня было меню по умолчанию, но это тоже идеально 🙂

 <script type="text/javascript">
    $(document).bind("contextmenu", function (event) {
        event.preventDefault();
        $(".custom-menu").toggle(100).
  css({
      top: event.pageY   "px",
      left: event.pageX   "px"
  });
    });
   //To hide the menu if left click event is fired
    $(document).bind("mousedown", function () {
        $(".custom-menu").hide(100);
    });
</script>
//New Menu
<ul class='custom-menu'>
  <a>Back</a><br />
  <a>Refresh</a><br />
  <a>Save</a><br />
</ul>
<style type="text/css">
.custom-menu {
  position: absolute;
  background-color:#EEE;
  overflow: hidden;
  width: 100px;
  }
</style>
  

Ответ №1:

event.which на самом деле это неправильная проверка…

Использовать event.button == 2 . Смотрите MouseEvent документацию.

Или используйте contextmenu событие, как предложил @MarshallOfSound (но впоследствии удалено в качестве ответа), но имейте в виду, что оно также может сработать, если пользователь вызвал contextmenu его другим методом, чем щелчок правой кнопкой мыши, например, щелчок левой кнопкой мыши CTRL в OSX. И это довольно недавний материал HTML5, поэтому он может не работать со старыми браузерами.

Редактировать После редактирования появляется contextmenu , возможно, лучше подходит для ваших нужд. Кроме того, event.preventDefault это ваш друг. 😉

Комментарии:

1. Спасибо за вашу помощь, я чувствую, что я очень близок к решению, но я просто не знаю, как именно

2. Вам придется создавать меню самостоятельно. Для этого существует множество реализаций, например jquery.ui menu . Или не скрывайте меню по умолчанию, а вместо этого добавляйте к нему .