IE8 распространение jQuery - щелчок в любом месте экрана активирует прокрутку
Этот код jQuery прекрасно работает во всех браузерах, кроме IE8. Что происходит, когда я щелкаю в любом месте страницы в IE8, будь то ссылка, div или просто в пустом пространстве, это активирует событие прокрутки. Я думаю, что это проблема распространения, и я прибил ее к определенному фрагменту jQuery (см. Комментарии в jQuery ниже), но я не уверен, как его изменить, чтобы он корректно работал в IE8. Очевидно, он должен прокручиваться только при нажатии на выбранный элемент.
JQuery:
$(".scroll, .tobottom, .video-cta").on("click",function(e){
e.preventDefault();
var target = "#" + $(this).data("target") + " h1";
$("html, body").animate({
scrollTop: $(target).offset().top
}, {duration: 2000, easing: "easeInOutQuint"});
});
HTML
<!DOCTYPE html>
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Blah blah blah</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic,700italic|Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<link href="video-js/video-js.css" rel="stylesheet">
<script src="video-js/video.js"></script>
<script>
videojs.options.flash.swf = "video-js/video-js.swf";
</script>
<style type="text/css">
/* Video */
.videocontent {width: 100%; max-width: 640px;}
.video-js {padding-top: 56.25%;}
.vjs-fullscreen {padding-top: 0px;}
</style>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56802153-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<header class="gradient">
<div class="wrap">
<div class="logo">
<a class="top" href="index.html">Blah blah blah</a>
</div>
<div class="subheading">
<p><i>Blah blah blah</i></p>
<a class="tobottom" href="#" data-target="stayconnected" onClick="_gaq.push(['_trackEvent', 'Navigation', 'Home', 'Register for Updates']);">Register for updates</a>
</div>
</div>
</header>
<div class="pages">
<section class="deeper wrap">
<div class="heading-hr">
<h1>Blah blah blah</h1>
<hr>
</div>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<div class="heading-hr">
<h2>Are <b>you</b> ready?</h2>
<hr>
</div>
<div class="scroll with-heading" id="container-video" data-target="videoseries">
<p class="start-exploring">Start Exploring</p>
<div id="allArrows-video">
<img src="img/scroll/arrow1.png" id="arrow1-video" class="arrow-video" />
<img src="img/scroll/arrow2.png" id="arrow2-video" class="arrow-video" />
<img src="img/scroll/arrow3.png" id="arrow3-video" class="arrow-video" />
<img src="img/scroll/arrow4.png" id="arrow4-video" class="arrow-video" />
</div>
<div id="allBubbles-video">
<img src="img/scroll/bubble1.png" id="bubble1-video" class="bubble-video" />
<img src="img/scroll/bubble2.png" id="bubble2-video" class="bubble-video" />
<img src="img/scroll/bubble3.png" id="bubble3-video" class="bubble-video" />
<img src="img/scroll/bubble4.png" id="bubble4-video" class="bubble-video" />
<img src="img/scroll/bubble5.png" id="bubble5-video" class="bubble-video" />
</div>
<div>
</section>
<section id="videoseries" class="videoseries wrap">
<h1>Blah blah blah</h1>
<div class="video">
<div class="videocontent">
<video id="promo-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload width="auto" height="auto" poster="video/video-series/promo.jpg" data-setup='{"techOrder": ["flash", "html5"]}'>
<source src="video/video-series/promo.mp4" type='video/mp4' />
<source src="video/video-series/promo.webm" type='video/webm' />
<source src="video/video-series/promo.ogv" type='video/ogg' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<script>
//reference the player
var myPlayer = videojs("promo-video");
//provide a name for the Events
var videoTitle = "Blah blah blah";
</script>
</div>
</div>
<div class="videodescription">
<h2>Blah blah blah</h2>
<p>Blah blah blah</p>
<a class="button video-cta" href="#" data-target="stayconnected" onClick="_gaq.push(['_trackEvent', 'Button', 'Home', 'Sign up to stay informed']);">Sign up to stay informed</a>
</div>
<div id="container-address" class="scroll" data-target="addresschallenges">
<div id="allArrows-address">
<img src="img/scroll/arrow1.png" id="arrow1-address" class="arrow-address" />
<img src="img/scroll/arrow2.png" id="arrow2-address" class="arrow-address" />
<img src="img/scroll/arrow3.png" id="arrow3-address" class="arrow-address" />
<img src="img/scroll/arrow4.png" id="arrow4-address" class="arrow-address" />
</div>
<div id="allBubbles-address">
<img src="img/scroll/bubble1.png" id="bubble1-address" class="bubble-address" />
<img src="img/scroll/bubble2.png" id="bubble2-address" class="bubble-address" />
<img src="img/scroll/bubble3.png" id="bubble3-address" class="bubble-address" />
<img src="img/scroll/bubble4.png" id="bubble4-address" class="bubble-address" />
<img src="img/scroll/bubble5.png" id="bubble5-address" class="bubble-address" />
</div>
<div>
</section>
<section id="addresschallenges" class="addresschallenges wrap">
<h1>Blah blah blah</h1>
<div class="challenges">
<div class="ie-left"><p>Blah blah blah</p></div>
<div class="ie-middle"><p>Blah blah blah</p></div>
<div class="ie-right"><p>Blah blah blah</p></div>
</div>
<div id="container-connected" class="scroll" data-target="stayconnected">
<div id="allArrows-connected">
<img src="img/scroll/arrow1.png" id="arrow1-connected" class="arrow-connected" />
<img src="img/scroll/arrow2.png" id="arrow2-connected" class="arrow-connected" />
<img src="img/scroll/arrow3.png" id="arrow3-connected" class="arrow-connected" />
<img src="img/scroll/arrow4.png" id="arrow4-connected" class="arrow-connected" />
</div>
<div id="allBubbles-connected">
<img src="img/scroll/bubble1.png" id="bubble1-connected" class="bubble-connected" />
<img src="img/scroll/bubble2.png" id="bubble2-connected" class="bubble-connected" />
<img src="img/scroll/bubble3.png" id="bubble3-connected" class="bubble-connected" />
<img src="img/scroll/bubble4.png" id="bubble4-connected" class="bubble-connected" />
<img src="img/scroll/bubble5.png" id="bubble5-connected" class="bubble-connected" />
</div>
<div>
</section>
<section id="stayconnected" class="stayconnected">
<h1>Stay <b>connected</b> to the latest news</h1>
<div class="form">
<div class="wrap">
<form class="cmxform" id="scForm" method="post" action="" pageId="4648716" siteId="147979" parentPageId="4648715">
<p class="join-us">Blah blah blah</p>
<div class="personal-info-test">
<div class="ie-left">
<div class="table-field">
<div class="first-row">
<div id="firstName-error"></div>
</div>
<div class="last-row">
<div>
<label class="hide" for="firstName">First name</label><input type="text" name="firstName" id="firstName" placeholder="First name"> <span>*</span>
</div>
</div>
</div>
</div>
<div class="ie-middle">
<div class="table-field">
<div class="first-row">
<div id="lastName-error"></div>
</div>
<div class="last-row">
<div>
<label class="hide" for="lastName">Last name</label><input type="text" name="lastName" id="lastName" placeholder="Last name"> <span>*</span>
</div>
</div>
</div>
</div>
<div class="ie-right">
<div class="table-field">
<div class="first-row">
<div id="email-error"></div>
</div>
<div class="last-row">
<div>
<label class="hide" for="email">Email address</label><input type="email" name="email" id="email" placeholder="Email address"> <span>*</span>
</div>
</div>
</div>
</div>
</div>
<p class="required-fields">* Required fields</p>
<p class="agreement">Blah blah blah</p>
<input type="hidden" name="formSourceName" value="StandardForm">
<input type="hidden" name="sp_exp" value="yes">
<div class="submit-button"><input type="submit" value="Register for Updates" onClick="_gaq.push(['_trackEvent', 'Button', 'Register for Updates', 'Register for Updates']);"></div>
</form>
</div>
</div>
</section>
<section class="footer-home wrap">
<footer>
<p class="text-center"><img src="img/logo-blah-large.png" alt="Blah logo"></p>
<p>Blah blah blah</p>
<nav>
<ul>
<li><a href="tos.html" onClick="_gaq.push(['_trackEvent', 'Navigation', 'Home', 'Terms of Use']);">Terms of Use</a></li>
<li><a href="privacy.html" onClick="_gaq.push(['_trackEvent', 'Navigation', 'Home', 'Privacy Policy']);">Privacy Policy</a></li>
</ul>
</nav>
<p class="trademark">Blah blah blah</p>
<p>Blah blah blah</p>
</footer>
</section>
</div>
<div class="success-overlay"></div>
<div class="success-message">
<span>X</span>
<h1>Thank you for participating</h1>
<p>Blah blah blah</p>
</div>
<script src="js/main.min.js"></script>
<script src="jquery-validation-1.13.1/dist/jquery.validate.min.js"></script>
<script src="jquery-validation-1.13.1/dist/additional-methods.js"></script>
<script>
$(document).ready(function() {
$.validator.addMethod("nonumbers", function(value, element, regexpr) {
return regexpr.test(value);
});
$.validator.addMethod("testemail", function(value, element, regexpr) {
return regexpr.test(value);
});
$("#scForm").validate({
debug: false,
errorPlacement: function(error, element) {
var errorid = "#" + $(error).attr("id");
var container = $(element).parent().parent().parent().find(errorid);
error.appendTo(container);
},
submitHandler: function(form) {
document.location.href = "index.html#stayconnected"
$(".success-overlay").show();
$(".success-message").show();
$(".success-message span").on("click",function(){
$(".success-overlay").hide();
$(".success-message").hide();
$("#firstName, #lastName, #email").val("");
});
form.submit();
},
rules: {
firstName: {
required: true,
minlength: 1,
nonumbers: /^[A-Za-z-]+$/
},
lastName: {
required: true,
minlength: 1,
nonumbers: /^[A-Za-z-]+$/
},
email: {
required: true,
email: true,
testemail: /^\w{2,}@\w{2,}\.\w{2,}$/
}
},
messages: {
firstName: {
required: "Please enter your first name",
minlength: "Please enter a valid first name",
nonumbers: "Only letters and dashes"
},
lastName: {
required: "Please enter your last name",
minlength: "Please enter a valid last name",
nonumbers: "Only letters and dashes"
},
email: {
required: "Please enter your email address",
email: "Please enter a valid email address",
testemail: "Please enter a valid email address"
}
}
});
});
</script>
</body>
</html>
1 ответ
В моем предыдущем ответе, который я удалил, OP заявил, что он использует jQuery 1.11.1, что исключает мою идею о том, что он использовал jQuery 2, который не поддерживает IE 8.
Согласно валидатору W3C, опубликованный вами код содержит 44 ошибки, включая незакрытые элементы контейнера. Internet Explorer не может обрабатывать недопустимый HTML, как и другие браузеры, и без кода, соответствующего стандартам, браузеры могут вести себя непредсказуемо.
Это самые заметные ошибки...
Строка 6, столбец 70: метаэлемент с атрибутом http-эквивалент, значение которого является X-UA-Compatible, должен иметь атрибут содержимого со значением IE=edge.
Строка 92, столбец 21: незакрытый элемент div.
Строка 77, столбец 96: незакрытый элемент div.
Строка 93, столбец 22: конец тега виден, но были открытые элементы.
Строка 132, столбец 22: конец тега виден, но были открытые элементы.
Строка 131, столбец 21: незакрытый элемент div.
Строка 155, столбец 22: конец тега виден, но были открытые элементы.
Строка 154, столбец 21: незакрытый элемент div.
Строка 140, столбец 89: незакрытый элемент div.