Как обрабатывать щелчок правой кнопкой мыши «открыть в новой вкладке» в действии Ember Js? - PullRequest
Новая
       26

Как обрабатывать щелчок правой кнопкой мыши «открыть в новой вкладке» в действии Ember Js?

1 голос
/ 03 марта 2020

У меня есть ссылка, которая вызывает действие при нажатии, как показано ниже. Я не заполнил href, потому что хочу, чтобы это обрабатывалось в действии, и я не хочу запускать перезагрузку страницы.

HBS 

<a class="cursor-pointer" {{on "click" (fn this.goToPage this.nextPageNumber)}}>Next</a>

JS

@action
goToPage(pageName) {
  this.args.pageUpdated('page', pageName.toString());
  // scroll to top of search results
  document.querySelector('.search-summary-title').scrollIntoView();
}

Есть ли способ направить пользователя на нужную страницу, если он щелкнет правой кнопкой мыши и выберет "открыть в новой вкладке"?

Ответы [ 2 ]

2 голосов
/ 10 марта 2020

Что вам нужно сделать, это установить href: 

<a href={{this.nextPageNumber}} {{on "click" (fn this.goToPage this.nextPageNumber)}}>Next</a>

и затем предотвратить действие по умолчанию в вашем обработчике click: 

@action
goToPage(pageName, event) {
  event.preventDefault();

  this.args.pageUpdated('page', pageName.toString());
  // scroll to top of search results
  document.querySelector('.search-summary-title').scrollIntoView();
}

, это также намного лучше для доступности!

0 голосов
/ 03 марта 2020

После дальнейших исследований я не думаю, что это возможно сделать в действии, но у меня есть обходной путь, если кому-то интересно.

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

HBS 

<a href="#/" {{on "contextmenu" (fn this.setHref this.nextPageNumber)}} 
{{on "click" (fn this.goToPage this.nextPageNumber)}}>Next</a>

То, что я делаю сейчас в действии setHref, просто заполняет href. Теперь, когда пользователь выбирает «Новое окно» или «Новая вкладка», он будет go в нужном месте. JS

@action
setHref(pageName, event) {
  event.target.setAttribute('href', `${window.location.pathname}?page=${pageName}`);
}
...