
15.09.2012, 20:55
|
Интересующийся
|
|
Регистрация: 25.01.2012
Сообщений: 12
|
|
Кроосбраузерность. С помощью чего?
День добрый.
Прочёл часть учебника по JS на этом сайте ( http://learn.javascript.ru), где автор, затрагивая вопросы достижения кроссбраузерности использовал проверку наличия того или иного метода через if-else
Пример:
element.onclick = function(event) {
event = event || window.event; // Кроссбраузерно получить событие
if (event.stopPropagation) { // существует ли метод?
// Стандартно:
event.stopPropagation();
} else {
// Вариант IE
event.cancelBubble = true;
}
}
А вот только что смотрел курс "Специалиста", где преподаватель, заведя речь о кроссбраузерности, начинает говорить о try-catch-finally
Т.е. в противовес коду, написанному выше, рекомендует делать так:
element.onclick = function(event) {
event = event || window.event; // Кроссбраузерно получить событие
try {
event.stopPropagation();
} catch {
event.cancelBubble = true;
}
Т.к. я ещё новичёк в JS - меня эта ситуация поставила в тупик. Как же всё-таки правильней решать вопросы кроссбраузерности?
|
|

15.09.2012, 21:05
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
В последнем случае возбуждается исключение, это значит, что он менее производительный чем первый.
И еще, не назначайте так обработчики событий:
element.onclick
Нужно использовать специальные методы для работы с событиями ( addEventListener и attachEvent). Для этого можно написать свою обертку:
<a href="#" id="link">click</a>
<script>
var $ = function(element)
{
if (!(this instanceof $))
return new $(element);
this.element = element;
};
$.prototype =
{
constructor: $,
on: function(event, callback)
{
if (typeof event !== 'string' && typeof callback !== 'function')
return this;
if (this.element.addEventListener)
this.element.addEventListener(event, callback, false);
else if (this.element.attachEvent)
{
this.element.attachEvent('on' + event, function(event)
{
callback.call(this, {
// ...
});
});
}
return this;
}
};
$(document.getElementById('link')).on('click', function(event) {
alert(event.target);
});
</script>
Последний раз редактировалось monolithed, 15.09.2012 в 21:46.
|
|

15.09.2012, 21:13
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
Как хотите, я также сторонник делать проверку на существование, нежели разрешать исключения, заранее должно быть известно, что и где работает, поэтому в работе с ошибками не вижу особого смысла
UPD: Можно ли считать это началом интернет цензуры ?
где-то в конце темы спрашивал об этом же
Последний раз редактировалось bes, 15.09.2012 в 21:16.
|
|

16.09.2012, 01:16
|
 |
junior
|
|
Регистрация: 29.11.2011
Сообщений: 3,924
|
|
недавно плагин прикручивал. В нем стояла проверка браузера. Везде работало, кроме IE9. И вроде плагин серьезный, API все такое, но ребята не учли, что IE8 и IE9 работают по разному  Пришлось дебажить 
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Последний раз редактировалось nerv_, 16.09.2012 в 01:19.
|
|

16.09.2012, 01:20
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
Сообщение от stereomaniac1
|
if (event.stopPropagation) {
|
такой способ тоже менее производителен... так как на свойстве может висеть getter, а у функций/объектов происходит вызов toString поэтому лучше и более производительный вариант:
if ( "stopPropagation" in event ) {
}
|
|

16.09.2012, 10:54
|
 |
Профессор
|
|
Регистрация: 26.03.2012
Сообщений: 823
|
|
stereomaniac1,
у "специалиста" уровень подачи знаний js очень низкий. И уже не актуальные подходы. Сам их смотрел..
Если бы специалист преподавал по учебнику с этого сайта толку было бы больше!
По поводу кроссбраузерности (имею в виду ie<9) не думаю что надо париться тем, кто сейчас приступает к изучению языка ИМХО. Так как с внедрением всяких вкусностей от html5 он просто утонет, если будет изучать как сделать какую-нибудь фитюльку, чтоб работала в старых ie!
|
|

16.09.2012, 11:32
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
Сообщение от dmitry111
|
Так как с внедрением всяких вкусностей от html5 он просто утонет, если будет изучать как сделать какую-нибудь фитюльку, чтоб работала в старых ie!
|
полезный опыт имхо, хотя способен вызывать рвоту 
|
|

16.09.2012, 11:36
|
 |
Профессор
|
|
Регистрация: 26.03.2012
Сообщений: 823
|
|
|
|

16.09.2012, 11:46
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
Сообщение от dmitry111
|
уж проще тогда использовать jquery, хотя я где то слышал, что скоро и они перестанут поддерживать старых ослов
|
о простоте речь не шла, речь шла об опыте эмуляции того, чего нет, с помощью того, что есть 
|
|

16.09.2012, 11:50
|
Профессор
|
|
Регистрация: 14.09.2012
Сообщений: 162
|
|
dmitry111, с кроссбраузерностью нужно начинать париться с самого начала изучения javascript, чтобы не возникало иллюзий. Нужно сразу понять, что каждый делает свои браузеры со своими преферансом и барышнями. И то, что можно написать что-то кроссплатформенное - это тоже иллюзия. Тут и так мертвым грузом висят всякие ie, так еще и мобильные браузеры. У этого 3d трансформации уже есть, у этого canvas тормозит, а этот вообще мультитач никак не понимает...
|
|
|
|