Как дать несколько событий и обработчиков в методе .on? - PullRequest
Новая
       44

Как дать несколько событий и обработчиков в методе .on?

0 голосов
/ 09 октября 2018

Я пытаюсь переместить submenu, используя несколько обработчиков в методе on.Что мне нужно, так это если я наведу указатель мыши на один из li элементов, строка события mouseenter обнаружит, а затем выполнит function panelON, и таким же образом пройдут пути от mouseleave до function panelOFF.

.Я написал коды по-разному, но все они не работали, и у каждого из них были свои специфические ошибки. 

  target = $('#home-menu-nav ul li');
  target.on('mouseenter mouseleave', {
    convert: $('#submenu-content'),
    panelON(event) || panelOFF(event)
  })

  function panelON(event) {
    if (event.type == 'mouseenter') {
      console.log('fx panelON detected')
    } else {
      return
    }
  }

Этот выводит ошибку Unexpected token ||.Похоже, что || метки не могут быть использованы с insdie обработчиков.

Следующий, который я попробовал, - это просто сгруппированные события и обработчики, все как в этой статье. ссылка 

  target.on( {mouseenter: panelON(event)}, {mouseleave: panelOFF(event)} )

  function panelON(event) {
    console.log('fx panelON detected')
  }

  function panelOFF(event) {
    console.log('fx panelOFF detected')
  }

И это было начато немедленно, независимо от того, что я завис target или нет. 

  target = $('#home-menu-nav ul li');
  target.on( {mouseenter: function() {
    console.log('fx panelON detected')
  }}, {mouseleave: function() {
    console.log('fx panelOFF detected')
  }} )

Последний.Этот только печатает mouseenter.mouseleave не работает.Есть ли способы давать и сопоставлять события и обработчики в методе .on?

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

@ kekboi, добро пожаловать в StackOverflow!

Ваша вторая попытка 

target.on( {mouseenter: panelON(event)}, {mouseleave: panelOFF(event)} )

была довольно близка.Учитывая, что () для функции немедленно вызывает данную функцию, что не соответствует вашим намерениям, и, как подсказал @Taplar - on принимает объект on(object) - я предлагаю вам использовать следующую версию.

target.on({ mouseenter: panelON, mouseleave: panelOFF });


$(function() {
    var target = $('button.mybutton');
    
    target.on({ mouseenter: panelON, mouseleave: panelOFF });

    function panelON(event) {
        console.log('fx panelON detected')
    }

    function panelOFF(event) {
        console.log('fx panelOFF detected')
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="mybutton">Hover Me Now</button>
0 голосов
/ 09 октября 2018

Когда вы используете версию привязок on(object), вы должны предоставить ей один объект, содержащий пары ключ / значение обработчика события: как показано ниже. 

$('button').on({
  mouseenter: function(){ console.log('Im In!'); }
  , mouseleave: function(){ console.log('Im Out!'); }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hover Me</button>
...