Достъпност (Voice over) и iOS 8 safari - събития

Това се отнася за събития, когато достъпността е включена.

Кодът е такъв; когато достъпността е включена и събитието за докосване се регистрира, събитията не се задействат. Ако не регистрирам събития с докосване, тогава всичко работи добре.

Пропускам ли нещо?

Този код работи с iOS 7 и по-нови, но проблемът е само с iOS 8 и по-нови (до последната версия).

<html >
<head>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        .displayTable{
    display:table;
    table-layout:fixed;
    border-collapse:collapse;
}                 
.displayRow{
    display:table-row;
}                  
.displayCell{
    display:table-cell;
    white-space:nowrap;
}    

    </style>
</head>
<body>
    <div id="outparent">
        
    </div>
    <script>

        var p1 = document.getElementById('outparent');

        function enableTouchEvents() {

            p1.addEventListener('touchstart', onTouch);
            p1.addEventListener('touchmove', onTouch);
            p1.addEventListener('touchend', onTouch);

        }
        function removeTouchEvents() {
            p1.removeEventListener('touchstart', onTouch);
            p1.removeEventListener('touchmove', onTouch);
            p1.removeEventListener('touchend', onTouch);

        }
        function render() {
            var str = '<form id="form"> \
                <div id="inparent"> \
                    <div style="table-layout:fixed;display:table" > \
                           <div style="display:table-row" >\
                           <div style="display:table-cell">       \
                                <input id="b2" value="submit me!" type="submit" /> \
                            </div></div> \
                    <div style="display:table-row">\
                           <div style="display:table-cell">       \
                                <input id="b1" value="click me!" type="button" /> \
                            </div></div> \
                    </div> \
                </div> \
            </form>';

            
            p1.innerHTML = str;
           

        }

        p1.addEventListener('click', function (e) {
            //console.log('out clicked  ' + e.target.id);
                     alert('you clicked on ' + e.target.id);
            e.preventDefault();
            
            
        });
        function onTouch(e) {
            console.log('event type ' + e.type + '  ' + e.timeStamp);
            
        }
        render();
       // comment this everything works fine.
        enableTouchEvents();

        

    </script>
</body>
</html>

 


person user1479159    schedule 19.01.2015    source източник
comment
можете ли да опишете какво трябва да се случи и каква е разликата?   -  person unobf    schedule 19.01.2015
comment
здравей, когато регистрирам събития за докосване чрез enableTouchEvents() не получавам събития за щракване на бутон. ако не се регистрирам за събития с докосване, тогава се задействат събития с щракване върху бутон. това се случва само когато достъпността е включена.   -  person user1479159    schedule 20.01.2015
comment
Сигурни ли сте, че не извиквате e.preventDefault() или e.stopPropagation() в нито един от манипулаторите на събития при докосване? Това ще спре щракането от изстрелване.   -  person unobf    schedule 20.01.2015
comment
Освен това вероятно трябва да добавите false като трети аргумент към извикванията addEventListener и removeEventListener.   -  person unobf    schedule 20.01.2015
comment
здравей, това е единственият код, работещ на устройството. няма preventDefault или stopPropagation. Може би бихте могли да опитате. Опитвам се да наблюдавам събитията чрез 'monitorEvents()' в програмата за отстраняване на грешки, но той показва само събития touchstart и touchend, а не събития за щракване   -  person user1479159    schedule 21.01.2015


Отговори (1)


Не трябва да разчитате на събития с докосване.

Когато VoiceOver е включен, общото поведение на устройството се променя: едно докосване изговаря елемента; двойно докосване активира елемента; движение наляво или надясно, преминаване към предишния/следващия елемент; и т.н. VoiceOver прихваща събития при докосване и извършва подходяща работа. В резултат на това събитията на докосване не се препращат към вашия скрипт както обикновено.

Някои никога не се препращат, някои се препращат по хаотичен начин или в необичаен ред, някои се препращат само след извършване на жеста за преминаване (двойно дълго докосване). Ако наистина искате да използвате събития с докосване и да ги накарате да работят добре, когато VoiceOver е включен, трябва внимателно да тествате. Вероятно най-доброто е да стоите далеч от събитията с докосване.

Ако добавяте персонализирани поведения като плъзгане наляво/надясно за преминаване към предишен/следващ слайд, завъртане, мащабиране и т.н., трябва да предоставите друга алтернатива за задействане на тези действия, като щракване върху бутони, тъй като потребителите на VoiceOver няма да могат да ги използваш по друг начин.

person QuentinC    schedule 14.11.2019