Событие Touchstart не работает на первоначально скрытой кнопке - PullRequest
Новая
       15

Событие Touchstart не работает на первоначально скрытой кнопке

0 голосов
/ 21 февраля 2012

Я создаю приложение для Android и имею 2 кнопки.1 начало и 1 остановка.Для запуска кнопка «Стоп» отображается после нажатия кнопки «Старт», после чего кнопка «Стоп» становится видимой и запускается невидимым.

Я пытаюсь получить событие сенсорного запуска на кнопке «СТОП» (будет добавлено для добавления в начало).кнопка, но не так важно).Однако по какой-то причине мой код ниже не работает должным образом.Может, кто-нибудь, пожалуйста, дайте мне знать, что я пропустил.

Фон: - использование jquery для скрытия моих кнопок - кнопки с фоновым изображением

JAVASCRIPT: 

var b=document.getElementById('STOP'),start=0;

//Check for touchstart
if('ontouchstart' in document.documentElement) 
{
    document.getElementById("notouchstart").style.display = "none";
}

//Add a listener that fires at the beginning of each interaction
[b].forEach(function(el){el.addEventListener('touchstart',interact);});

//Add the event handlers for each button
b.addEventListener('touchstart',highlight);

//Functions Store the time when the user initiated an action
function interact(e) 
{
    start = new Date();
}

//Highlight what the user selected and calculate how long it took the action to occur
function highlight(e) 
{
    e.preventDefault();
    e.currentTarget.className="active";
    if(start)
    {
        alert("test")
    }
    start = null;
}

КНОПКА HTML: 

<INPUT TYPE="button" style="background:url(images/Start_Btn.png); background-color:transparent; width:150px; height:186px; border:none; cursor:pointer;" id="START" onClick="startBTN();">
<INPUT TYPE="button" style="background:url(images/Stop_Btn.png); background-color:transparent; width:150px; height:186px; border:none; cursor:pointer;" id="STOP">

Ответы [ 2 ]

0 голосов
/ 23 февраля 2012

Я решил свою проблему, я пытался стать слишком умным об этом.Мне просто нужно 2 строки кода в функции onload: 

    function onload()
    {
    /* PART 1 - sets touch even to button
       PART 2 - Defines what JavaScript function to run
       PART 3 - Indicates to set the touch event to false on first load */
        document.getElementById('START').addEventListener('touchstart', startBTN, false);
        document.getElementById('STOP').addEventListener('touchstart', stop, false);
    }

Для вызова функции onload: 

<body  onload="onload();">
     //HTML CONTENT
</body>

Надеюсь, это кому-нибудь поможет

0 голосов
/ 21 февраля 2012

У вас есть два touchstart события на одинаковых элементах.Следовательно, он выполняет interact и highlight одновременно.Это намеренно?Кроме того, вы не передаете event в вашу highlight(e) функцию.Вам нужно обернуть его в анонимную функцию, которая передает его: 

b.addEventListener('touchstart',function(e) { highlight(e); }, false);

Кроме того, не забудьте добавить false в ваше объявление addEventListener.

РЕДАКТИРОВАТЬ: Мы не хотим иметь двух прослушивателей событий для touchstart для одного и того же элемента.Нам нужно изменить оператор forEach, а также функцию highlight. 

var b = document.getElementById('STOP');
var c = document.getElementById('START');
var array = [b, c];

array.forEach(function(element, index, array) {
  element.addEventListener('touchstart', function(event){ highlight(event); }, false);
});

function highLight(event) {
  start = new Date(); // not sure what you're trying to accomplish here
  event.preventDefault();
  event.currentTarget.setAttribute('class', 'active');
  if(start) {
    alert("test")
  }
  start = null;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...