Javascript-форум - Javascript-магистрам

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Javascript-магистрам (https://javascript.ru/forum/events/39108-javascript-magistram.html)

Javascript-магистрам

О великие Javascript-магистры )) Нормально ли я реализовал галерею изображений + тултип на уровне знаний до статьи "Делигирование событий", что в теме "События, взаимодействие с посетителем"( http://learn.javascript.ru/event-delegation ) ?)) http://learn.javascript.ru/play/hfR3Cb

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

но тут этого не нужно было делать :)

ну и по мелочи, вроде такого :

span.onclick=function(e){
  ...
  var largeImg=document.getElementById('largeImg');
  ...
}

largeimg лучше закешировать и не искать одно и то же при каждом клике

Логично)) Спасибо за помощь:)

VladShestakov999,
в старых ИЕ это работать не будет

var target = e.target || event.srcElement;

так как на e.target выдаст ошибку и проверка не будет выполнена, а так работать будет

var target = event.srcElement ||  e.target ;

так же нельзя делать так (точнее делать можно но работать не будет, не помню точно где, вроде в том же старом ие или лисе, вроде в лисе)

e = e || window.event;

но можно так

function(evt){
 var e = evt || window.event;

Цитирую учебник:

Цитата:

В IE<9 он доступен как event.srcElement, остальные браузеры используют event.target. Кроссбраузерное решение выглядит так:

var target = event.target || event.srcElement;

Про второе незнаю, но если это так - буду знать. Но вроде второе это именованные аргументы и ничего того про FF там нету. ( http://learn.javascript.ru/arguments-named )

VladShestakov999,
я читал эту книгу, и в свое время я наступил на эти грабли, не верите, пробуйте сами

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    
    <div id='test'>
      <span>click span(does not work in old IE)</span>
    </div>
    
    <div id='test1'>
      <span>click span( work in old IE)</span>
    </div>
    
    <script>

      document.getElementById('test').onclick = function (e)
      {
        var target = e.target || event.srcElement;
        
        alert('work')
      
      }
      
      
       document.getElementById('test1').onclick = function (e)
      {
        var target = event.srcElement || e.target;// меняем местами
        
        alert('work')
      
      }
      


    </script>

  </body>
</html>

VladShestakov999, второе так же можете проверить(в последней версии лисы , бага нет но в старых есть)...

cyber,
Для начала нужно получить window.event для ie. А потом уж проверять на target/srcElement

zebra,
в ие event это свойство window.

Ну и правильно)) С чего бы ему работать? В учебнике четко написано:

Цитата:

IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event. Обработчик может обратиться к нему.

Поэтому если вы переопределите объект событий следующим образом, то все будет работать:

e=e || window.event;
        var target = e.target || e.srcElement;

Попробуйте, через IE tester, например: http://learn.javascript.ru/play/Ah6tz А по поводу FF не знаю, возможно вы и правы. Стоит проверить

У вас ошибка в 18 строке. "e" не будет существовать для ie.

Галерея изображений, делегирование, tooltip

делегирование

<!DOCTYPE HTML>
<html>
<head>
  <title>Галерея</title>
  <style>
  body {
  margin: 0;
  padding: 0;
  font: 75%/120% Arial, Helvetica, sans-serif;
}

h2 {
  font: bold 190%/100% Arial, Helvetica, sans-serif;
  margin: 0 0 .2em;
}
h2 em {
  font: normal 80%/100% Arial, Helvetica, sans-serif;
  color: #999999;
}

#largeImg {
  border: solid 1px #ccc;
  width: 550px;
  height: 400px;
  padding: 5px;
}
#thumbs{
  text-align:center;
}
#thumbs a {
  position:relative;
  display:block;
  border: solid 1px #ccc;
  width: 100px;
  height: 100px;
  padding: 3px;
  margin: 2px;
  float: left;
}
#thumbs a:hover {
  border-color: #FF9900;
}
.tooltip{
  border-radius:3px;
  border-bottom-left-radius:0;
  padding:5px;
  color:white;
  z-index:3;
  position:absolute;
  top:-15px;
  right:-15px;
  background:rgba(0,0,0,.6);
}
.tooltip:after{
  content: "";
  position: absolute;
  left: -0.6px;
  bottom: -5px;
  z-index:3;
  -webkit-transform: rotate(0deg) skewX(-14deg);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(0,0,0,.6);
}
p{
  position:relative;
}
  </style>
  <meta charset="utf-8">
</head>

<body>

<p>
  <img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image">
</p>

<span id="thumbs">
  <!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
  <a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
  <a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
  <a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
  <a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
  <a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
</span>
<script>
var d = document.getElementById("thumbs"),
    e = document.getElementById("largeImg");
 d.onmouseover = function (a) {
     a = a || window.event;
     a = a.target || a.srcElement;
     if ("IMG" == a.tagName) {
         var b = document.createElement("div"),
             c = a.parentNode;
         b.innerHTML = c.title;
         b.className = "tooltip";
         c.appendChild(b);
         a.onmouseout = function () {
             c.removeChild(b)
             this.onmouseout = null
         }
     }
 };
 d.onclick = function (a) {
     a = a || window.event;
     a = a.target || a.srcElement;
     "IMG" == a.tagName && (e.src = a.parentNode.href);
     return false
 };
</script>
</body>
</html>

zebra,
знаю, поэтому и проверяю сначала на event.scrElement так как другие браузеры не вызывают ошибку на него (хотя должны) и тогда можно отказать от лишнего условия проверки event поменяв их местами.
P.s когда писал тот коммент просто не увидел что у автора есть проверка на event

function (e) {
    alert(event);
    
}

Откуда event тогда возьмется в других браузерах кроме ie?

zebra,
VladShestakov999,
как оказалось фишка в том что у хрома есть свойтсво event у window)

Ввел в консоль хрома window.event. Получил undefined :nono:
Хотя да, что-то я провтыкал, оно при событии появляется.

zebra, а я забыл что у меня опера стоит на webkit и подумал что там тоже работает))

в 10 версии лисы все нормально, значить уже в общем не актуально)

рони, Оригинальное решение)) :)