Форум

x-yuri · #1 (**permalink**) 09.02.2010, 01:18

ну пускай фокус нельзя отменить с помощью return false/preventDefault. Но что самое интересно, если вызвать blur в обработчике focus (из-за щелчка мышью) в ff, то событие фокус возникает еще раз на том же элементе. Кто-нибудь может объяснить физику процесса?

Для полноты картины: опера не вызывает onblur, а в chrome, похоже, эти события не реализованы.

тестовый код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript">
    function d( t ) {
        var br = document.createElement('br');
        document.body.appendChild( br );
        var n = document.createTextNode( t );
        document.body.appendChild( n );
    }
    </script>
</head>
<body>

<a href="#" 
   onblur="d('blur');"
   onfocus="d('focus');
            this.blur();">link</a>

</body>
</html>

x-yuri · #2 (**permalink**) 10.02.2010, 19:00

или может есть более цивилизованные пути решения проблемы?

e1f · #3 (**permalink**) 10.02.2010, 19:32

Кстати, это при клике. Если выделить ссылку табом, то в ФФ будет только одна пара focus-blur, мышью - две.

UPD Вот, похоже, на эту тему: https://bugzilla.mozilla.org/show_bug.cgi?id=53579

e1f · #4 (**permalink**) 10.02.2010, 21:14

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<script type="text/javascript">
    function init() {
        for ( var i in {
            'DOMActivate': 1,
            'click': 1,
            'mousedown': 1,
            'mouseup': 1,
            'contextmenu': 1
        } ) document.body.firstChild.addEventListener(i, function(e){
            d( e.type );
        }, true);
    }
    function d( t ) {
        var br = document.createElement('br');
        document.body.appendChild( br );
        var n = document.createTextNode( t );
        document.body.appendChild( n );
    }
    function f( target ) {
        d('focus');
        target.nextSibling.focus();
    }
</script> 
</head> 
<body onload="init()"><a href="#" onblur="d('blur')" onfocus="f(this)">link</a><a href="#">.</a></body> 
</html>

При mousedown на link -- двойной focus/blur. При это фокус вроде как на второй ссылке. Ппц...

UPD Ммм, а если нажимать средней кнопкой -- все гут

e1f · #5 (**permalink**) 11.02.2010, 02:46

В общем, если задача стоит просто не допустить фокуса "любой ценой"

, то вроде бы достаточно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<script type="text/javascript">
    function d( t ) {
        var br = document.createElement('br');
        document.body.appendChild( br );
        var n = document.createTextNode( t );
        document.body.appendChild( n );
    }
</script> 
</head> 
<body><a href="#"
    onblur="d('blur')"
    onfocus="d('focus');this.blur()"
    onmousedown="d('mousedown');this.blur();return false"
    oncontextmenu="d('contextmenu');this.blur();return false;">link</a>
</body> 
</html>

x-yuri · #6 (**permalink**) 11.02.2010, 04:39

bug вроде не про то

Сообщение от e1f

При mousedown на link -- двойной focus/blur. При это фокус вроде как на второй ссылке. Ппц...

причем получается так
focus0
blur0
focus1
blur1
focus0
blur0
focus1

но вообще дело в том, что смена фокуса происходит внутри обработчика смены фокуса. Чувствуешь, м?

(хотя могло бы и работать) Если изменить фокус после завершения обработчиков, то все ok

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<script type="text/javascript">
    function d( t ) {
        var br = document.createElement('br');
        document.body.appendChild( br );
        var n = document.createTextNode( t );
        document.body.appendChild( n );
    }
</script> 
</head> 
<body>
    <a href="#" onfocus="
        d('focus0')
        var self = this;
        setTimeout( function() {
            self.nextSibling.focus();
        }, 0);
    "
    onblur="d('blur0')"
    >link0</a
    ><a onfocus="d('focus1')" 
       onblur="d('blur1')" href="#">link1</a>
</body> 
</html>

Сообщение от e1f

В общем, если задача стоит просто не допустить фокуса "любой ценой" , то вроде бы достаточно так:

ну любой ценой вроде не надо было. Да и blur в onfocus хватает. Просто странно ff себя ведет...

Вообще задача была примерно такая: есть ссылка выполненная в виде картинки, и вокруг нее эта рамочка появлялась... совсем не в тему

Serg_pnz · #7 (**permalink**) 11.02.2010, 10:49

Цитата:

Вообще задача была примерно такая: есть ссылка выполненная в виде картинки, и вокруг нее эта рамочка появлялась... совсем не в тему

Это не так лечится)))
Это лечится в css:

a {outline: none;}

Спасибо http://www.htmlbook.ru/faq/?a=67

Octane · #8 (**permalink**) 11.02.2010, 12:52

Сообщение от Serg_pnz

a {outline: none;}

а для IE есть какое-то свойство в JS, попробую вспомнить…

--------

а вот нашел http://webmaster.ee/javascript/JavaS...html#hideFocus

e1f · #9 (**permalink**) 11.02.2010, 13:08

Пуф, точно не в ту степь

subzey · #10 (**permalink**) 11.02.2010, 16:35

Я обычно использую

a img {border: none; outline: none} a {outline: none}

— убирает бордюр и изображений и пунктирную рамку вокруг активной ссылки в Fx

Форум

Справочник

Discord чат

Курсы javascript