Обрабатывать указатель мыши / указатель мыши на элементе div и вложенных элементах с помощью jQuery - PullRequest
Новая
       22

Обрабатывать указатель мыши / указатель мыши на элементе div и вложенных элементах с помощью jQuery

1 голос
/ 19 ноября 2011

Я хочу отобразить панель инструментов, если мышь находится над div или любым из вложенных элементов div.Но следующее решение с jQuery 1.7 работает, только если мышь находится над div напрямую, что возможно, только если я добавлю padding к классу item css. 

<head>
  <script type="text/javascript" src="jquery-1.7.min.js"></script>
  <style type="text/css">
    .toolbar { display: none; }
    .item { padding: 1px; } /* doesn't work without padding! */
  </style>
  <title>Demo</title>
</head>

    <body>

  <div class="section">
    <div class="item">
      <p class="toolbar">TOOLS</p>
      <p>content</p>
    </div>
    <div class="item">
      <p class="toolbar">TOOLS</p>
      <p>content</p>
    </div>
  </div>

  <script type="text/javascript">
    $(".section").on(
      "mouseenter",
      ".item",
      function(event) {

        $(event.target).children('.toolbar')
          .show(100);
      }
    )

    $(".section").on(
      "mouseleave",
      ".item",
      function(event) {
        $(event.target).children('.toolbar').hide();
      }
    )      
  </script>

</body>

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

Как я могу обрабатывать события mouseenter и mouseleave без уловки заполнения?

Ответы [ 4 ]

2 голосов
/ 19 ноября 2011

Кажется, что event.target - это не div - изменение на $(this) решает проблему -> http://api.jquery.com/event.target/

http://jsfiddle.net/manseuk/StUvz/

2 голосов
/ 19 ноября 2011

Эта скрипка , которую я создал, отлично работает без заполнения.Может быть, вам просто нужно настроить что-то маленькое (например, ширину, унаследованную в цепочке CSS).

Если это не отвечает вам, дайте нам скрипку, которая воспроизводит проблему, чтобы мы могли изменить ее для вас.

0 голосов
/ 16 июня 2013

Использование $(event.currentTarget) устранит проблему и будет вести себя так же, как $(this), только лучше, так как будет продолжать работать в ситуациях, когда this - это что-то еще: 

init: function()
{
    $("button").on("mouseenter", this.proxy(function(event)
    {
        this.classMethod();

        console.log( event.currentTarget );
    }) );
}

Как видите, event.currentTarget равно this: 

$("button").on("mouseenter", function(event)
{
    console.log( event.currentTarget === this );
});
0 голосов
/ 19 ноября 2011

Это тоже работает без отступов http://jsfiddle.net/rkpVW/ вы можете напрямую включить (". Item"), я думаю, что это самое простое решение для связывания элементов.

Редактировать: http://jsfiddle.net/rkpVW/1/ с использованием живого динамического контента

...