Как сделать элемент неосязаемым для кликов событий?

Question

В настоящее время я работаю над веб-сайтом для клиента, который занимается контентом, спроектированным для галереи изображений/видео. Что я сделал:

Я сгруппировал все изображения по проекту (например, кладка, кирпичная кладка и т. Д.). Сами проекты имеют внутри них различные изображения и видео. Вот краткий фрагмент:

<div class="gl-project-wrap"> 
    <p class="projectTitle">Commercial - new entrance Montessori school with concrete walk and architectural white poured piers</p> 

     <div class="gl-image-wrap"> 
     <img src="images/thumbs/24.png" class="gl-image" /> 
      <img src="images/thumbs/25.png" class="gl-image" /> 
     <img src="images/thumbs/26.png" class="gl-image" /> 

      <img src="images/videos/screenshots/12.png" class="gl-video" alt="Brickwork - Stone Veneer" /> 

    </div> 
</div> 

Теперь вот что я хочу сделать:

• При наведении указателя мыши на изображение, преобразование изображения в масштабе (1.2), изменение границы до белого, а также изменить курсор к указателю. Это прекрасно работает. Это не мой вопрос

Мой вопрос заключается в следующем:

Когда пользователь нажимает на изображение, я написал плагин JQuery, который считывает СРК изображения, извлекает номер из него (напр 24. , 25, 26), переходит в папку «fullsize» и захватывает полноразмерное изображение в соответствии с вышеупомянутым номером и начинает его загружать. Затем изображение отображается в приложении типа «лайтбокс» blah blah blah ... Это отлично работает с обычными изображениями. Это не мой вопрос. Я только пишу эту информацию, поэтому я могу лучше объяснить свой вопрос, который заключается в следующем:

• Я хочу, чтобы изображения на скриншоте работали точно так же, как и большие картинки, кроме дополнительной функции. Я хочу, чтобы кнопка воспроизведения отображалась поверх изображения onmousehover (или onmouseenter, в зависимости от того, что лучше), чтобы символизировать пользователя, что это видео.

Вот быстрый код JQuery я написал для этого:

var gl_video; 

$(document).ready(function() { 
     $(document).on("mouseenter", ".gl-video", function(){ 

     gl_video = $(this); 

    var styles = { 
      top:$(this).position().top, 
     left:$(this).position().left, 
     width:$(this).outerWidth() + 'px', 
     height:$(this).outerHeight() + 'px' 
    }; 

    $('<span id="videoCover" class="videoCover"><p>&#x27A4</p></span>').appendTo($(this).parents('.gl-image-wrap')); 
    $('.videoCover').css(styles); 
    }); 

     $(document).on("mouseleave", ".gl-video", function() { 

      $(this).css({transform:'scale(1.2)', borderColor:'#fff'}); 
     $('.videoCover').css({transform:'scale(1.2)'}); 
    }); 

    $(document).on("mouseleave", ".videoCover", function(){ 

      $(gl_video).css({transform:'scale(1)', borderColor:'#e09b07'}); 
     $(this).animate({transform:'scale(1)'},2000, function(){ $(this).remove(); }); 
    }); 

}); 

Такого рода работы, но я не очень доволен. Я вовсе не профессиональный программист javascript/jQuery, но даже вижу, что этот код ужасен и неряшлив.

Есть пара вещей, которые мне не нравятся об этом:

• Когда пользователь парит над скриншот, срок videoCover добавляемой к соответствующему .gl-image-wrap, но он получает прилагаемая на верхней части изображения. Это приводит к тому, что событие onmouseenter переключается на промежуток, и изображение на скриншоте больше не считается зависающим. Вот почему я создал глобальную переменную под названием gl-video. Таким образом, скриншот, который был завис, можно записать и использовать позже в моем плагине.

То, что я предпочел бы сделать это:

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

Я знаю, что это несколько сбивает с толку, поэтому я буду обобщать его здесь: 1) Я хочу, чтобы мои видео скриншоты отображать кнопку воспроизведения, когда парил над 2) Я хочу, чтобы эта кнопка воспроизведения не в основном имеют не событие щелчка.Если пользователь нажимает на нее, он должен вызвать событие Нажмите на изображение позади кнопки воспроизведения

У меня было несколько идей, но ни что не удовлетворяло меня: 1) установить следующие на кнопку воспроизведения элемента:

pointer-events: none 

Поскольку это не поддерживается в IE, я бы предпочел не использовать его. 2) Создание полного набора новых больших пальцев для каждого скриншота и замены src на hover src для каждого скриншота видео при зависании. Я бы предпочел не использовать это, потому что у меня будет около 30-40 видео на странице, и для этого потребуется загрузить двойные изображения (один раз для обычных больших пальцев и снова для изображения наведения каждого из них). Это увеличило бы время загрузки, и я хотел бы держаться подальше от этого.

Ну, вот и все. Любая помощь будет оценена по достоинству. Прежде чем я пойду, я хотел бы упомянуть, что этот код не установлен в камне, а это значит, что я открыт для лучших предложений. Не пытайтесь исправить мой неряшливый код. Если у вас есть лучшая идея о том, как реализовать это, я был бы более чем счастлив прочитать его.

Еще раз спасибо ребятам!

Вот мой JSFiddle

Answer 1

Моя идея для вашей проблемы, чтобы положить пустой Div над изображением и подключить все события (нажмите/парения/отпуска), которые теперь связаны с вашим изображением.
Под этим пустым div (меньший z-index) отображается ваш «play» -gif, когда пользователь наводил ваш пустой div. Внизу оставьте свое изображение.

Это самое простое решение, которое я могу себе представить.

В вашем примере на скрипке - я сделал это с помощью обертки только с помощью css - нет animate необходимо. Здесь: http://jsfiddle.net/abbJV/1/
... ненужное расстояние между рамкой и изображением исправлено: http://jsfiddle.net/abbJV/2/
... окончательный вариант - стиль и prettyfied: http://jsfiddle.net/abbJV/3/
наслаждайтесь!

Answer 2

event.preventDefault() Попробуйте использовать для не события нажатия на кнопку воспроизведения, а затем использовать щелчок(), чтобы вызвать событие щелчка изображения.