边框触摸按钮：主动应用但不触发事件

我目前正在研究[小]触摸屏用户界面。我遇到了一个问题，用户可能不小心碰到了我们按钮的边缘，并且具有活动的CSS触发器，但由于没有实际按下按钮，因此不会触发事件触发。边框触摸按钮：主动应用但不触发事件

这里是一个视觉表示，黄色方框是一个手指点击和按钮处于活动状态，但不激活事件。

这里是SCSS以及套内它的相关

.action-button { 
    @extend .nav-button; 
    height: 85%; 
    border-radius: $border-radius; 
    border: none; 
    min-width: 85px; 
    margin: { 
    left: 5px; 
    right: 5px; 
    top: 5px; 
    } 
    font-weight: bold; 
} 
.nav-button { 
    &.active { 
    background-color: $active-button-background-color; 
    } 
    &:last-of-type { 
    margin-right: 10px; 
    } 
} 
.nav-button:active { 
    background-color: $active-button-background-color; 
}

这里是一个小提琴，所以你可以玩的这个问题，以及https://jsfiddle.net/kaagu3dj/12/ [注意，您将需要在触摸模拟器模式]

So TL; DR，用按钮捕捉这个边缘触摸的最佳方式是什么？

谢谢！

来源

2017-09-06 Surreal

获得更多的想法按照你的设计是没有边界的需求，让你简单地删除您的边框和整个东西做工精细.. :) –

我会进行编辑，但边境==在边缘这个背景。我遇到了一个问题，用户可以触摸这些按钮的边缘，并且'touchend'事件不会触发，但'：active' css正在应用 – Surreal

您可以创建小提琴吗？所以我可以在那里更新代码。 –

这是touchend和touchstart事件的原生行为。所以你可以做同样的事情。

删除您的：活动伪类CSS，并添加如下脚本。

let count = 0; 
$('.main').on('touchstart', function(event) { 
    count++; 
    $('#count').html(count); 
    $('.main').css("background", "blue"); 
}); 
$('.main').on('touchend', function(event){ 
    $('.main').css("background", "#ddd"); 
});

可能这会帮助你。你也从fiddle

来源

2017-09-08 11:59:01

有意义，我正在处理焦点/模糊事件，这是更多优雅 – Surreal

边框触摸按钮：主动应用但不触发事件

回答

相关问题