即使类名不存在,Javascript事件仍会触发
Javascript event still firing even when class name doesn't exist
谁能给我解释一下,当一个事件的目标类名不存在时,它是如何触发的?
(function ($) {
var config = {};
$(document).ready(function () {
var wi = $(window).width();
if ( wi > 768 ) {
$('body').addClass('dosomething');
} else {
$('body').removeClass('dosomething');
}
$(window).resize(function() {
var wi = $(window).width();
console.log(wi);
if ( wi > 768 ) {
$('body').addClass('dosomething');
} else {
$('body').removeClass('dosomething');
}
var $container = $('.email-signup__wrap'),
$cHeight = $('.email-signup').outerHeight();
// $('.dosomething .email-signup__wrap').on('mouseenter mouseleave', function(ev) {
$('body').on('mouseenter mouseleave', '.dosomething .email-signup__wrap' , function(ev) {
var $this = $(this);
if ( ev.type === 'mouseenter' ) {
TweenMax.to($container, .4, {
ease: Power2.easeOut,
css:{
overflow: 'visible',
position: 'absolute',
top: -$cHeight
}
});
}
else
{
TweenMax.to($container, .4, {
ease: Power2.easeOut,
css:{
position: 'relative',
top: 0
},
onComplete: hide
});
function hide(){
$container.css('overflow', 'hidden');
}
$("div.mce_inline_error").remove();
}
});
});
});
})( jQuery );
我把dosomething类添加到每个选择器中,试图防止事件在屏幕尺寸小于768px时触发。
基本上,用户将鼠标悬停在页脚栏上,然后从画布上弹出一个联系表单,但是在较小的屏幕/移动设备上,它在页面内容的底部保持静态。
我知道这是一个基本的代码,但是,我已经试着让它工作了好几天,我正在赶一些代码,试图找到一个解决方案。
我不是工作后,媒体查询等....为了我自己的理智,我真的很想理解这一点。
最终工作解
(function ($) {
var config = {};
$(document).ready(function () {
$(window).on("resize", function () {
resizeWindow();
}).trigger("resize");
var $container = $('.email-signup__wrap'),
$cHeight = $('.email-signup').outerHeight();
$(document).on({
mouseenter: function() {
TweenMax.to($container, .4, {
ease: Power2.easeOut,
css:{
overflow: 'visible',
position: 'absolute',
top: -$cHeight
}
});
},
mouseleave: function() {
TweenMax.to($container, .4, {
ease: Power2.easeOut,
css:{
position: 'relative',
top: 0
},
onComplete: hide
});
function hide(){
$container.css('overflow', 'hidden');
}
$("div.mce_inline_error").remove();
}
}, ".dosomething .email-signup__wrap");
});
function resizeWindow() {
config.wWidth = $(window).width();
if ( config.wWidth > 768 ) {
$('body').addClass('dosomething');
} else {
$('body').removeClass('dosomething');
}
}
})( jQuery );
在jquery中使用event delegation
您可以动态地添加类.dosomething
$('body').on('mouseenter mouseleave', '.dosomething .email-signup__wrap' , function(ev) {
相关文章:
- 召回窗口加载事件 - javascript
- 动态创建OnClick事件Javascript
- 全局屏幕span onclick触发一个事件javascript
- 使用react js在跨域上执行事件javascript
- 在change事件javascript上动态添加行
- 在粘贴事件Javascript的输入字段中删除所有非数字字符
- 如何在多表单的输入框中使用输入事件javascript
- 无法查看特定信息.单击事件.Javascript
- 两个文本框事件Javascript
- 阻止鼠标滚轮滚动,但不阻止滚动条事件.JavaScript
- 从 onkeydown 事件 (Javascript) 获取当前用户输入
- “稍后提醒我”/“快速事件”JavaScript解决方案
- 更改我正在侦听的事件Javascript的对象的CSS
- setInterval 不允许同时单击事件 - javascript
- 对每种情况使用一个事件(JavaScript 开关)
- 仅创建第二次点击事件 Javascript
- 每 60 秒仅启动一次事件 (JavaScript)
- 如何连接来自不同文件的事件?Javascript/Backbone
- URL 更改事件 - JavaScript
- 无法在无头模式下使用 watir Webdriver 执行按钮元素的 onclick 事件 javascript