Touchstart事件不在本来隐藏的按钮上工作

-1

我正在创建一个Android应用程序并有2个按钮。 1次开始和1次停止。一旦点击了开始按钮，就可以看到停止按钮，然后停止按钮变为可见并开始不可见。Touchstart事件不在本来隐藏的按钮上工作

我想在STOP按钮上得到一个touchstart事件（可能会添加到开始按钮，但不是必不可少的）。但是，出于某种原因，我的下面的代码无法正常工作。请让我知道我错过了什么。

背景： - 使用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">

来源

2012-02-21 LandL Partners

我解决了我的问题，我试图让它太聪明了。我只需要在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>

希望这可以帮助别人

来源

2012-02-23 12:48:21

你有两个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; 
}

来源

2012-02-21 16:24:51

不，它不是我的本意被要求在touchstart同一个事件两次。我对这一切都很陌生，在编码方面有点失落。我只是想检测touchstart，因为我会点击事件并运行JavaScript函数。以上例子可以是一个简单的javascript警报。这是否意味着我的上面的代码有很多不相关的代码？你能帮我指出一点。如果我将它作为两个分开的按钮同时可见，这将起作用。 – 2012-02-21 16:37:58

我完全理解。 JavaScript是一个善变的野兽。让我们特别关注你的'forEach'循环。您只在一个元素上运行此循环，因此，我建议将“开始”和“停止”按钮添加到数组中，循环遍历该数组并向每个元素添加事件侦听器。让我更新我的答案。 – 2012-02-21 16:43:32

刚刚实现了上面的代码，但是这似乎永远不会通过事件函数（alert（“test”）;）。此外，我得到了一个错误，不得不在错误之后添加一个）;} – 2012-02-21 17:28:55

Touchstart事件不在本来隐藏的按钮上工作

回答

相关问题