Touchstart 事件不适用于原来隐藏的按钮

发布于 2025-01-07 07:59:16 字数 1458 浏览 0 评论 0原文

我正在创建一个 Android 应用程序，有 2 个按钮。 1 次启动和 1 次停止。要开始，一旦单击开始按钮，停止按钮就可见，然后停止按钮将变得可见，而开始按钮将不可见。

我正在尝试在“停止”按钮上获取 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">

原文

I am creating an Android app and have 2 buttons. 1 start and 1 stop. To start with the stop button is visible once the start button has been clicked then the stop button becomes visible and start invisible.

I am trying to get a touchstart event on the STOP button (would liek to add to start button as well but not as essential). However, for some reason my below code is not working properly. Could some please let me know what i have missed out.

Background:
- using jquery to hide my buttons
- the buttons with background image

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 BUTTON:

<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">

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半仙 2025-01-14 07:59:16

您在同一元素上有两个 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;
}

You have two touchstart events on the same elements. Therefore, it's performing interact and highlight at the same time. Is that intentional? Also, you're not passing event into your highlight(e) function. You need to wrap it in an anonymous function that passes it:

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

Also, don't forget to add false to your addEventListener declaration.

EDIT: We don't want to have two event listeners for touchstart to the same element. We need to modify the forEach statement as well as the highlight function.

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;
}

回复收藏 0 原文

恋竹姑娘 2025-01-14 07:59:16

我已经解决了我的问题，我试图变得太聪明。我只需要 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>

希望这对某人有帮助

I have solved my issue, I was trying to get too clever about it. I simply need 2 lines of code within the onload function:

    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);
    }

To Call Function onload:

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

Hope this helps someone

回复收藏 0 原文

~没有更多了~

关于作者

如日中天

暂无简介

文章

639 人气

关注发私信

友情链接

文江博客

Touchstart 事件不适用于原来隐藏的按钮

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

Touchstart 事件不适用于原来隐藏的按钮

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。