html - preventDefault 和 stopPropagation 将不允许更改 div 的 css 属性
问题描述
我正在使用触摸屏并从 div 上的 onclick 更改为 touchstart,以便单击速度很快。但问题是,当我触摸 div 事件时使用这种方式工作得很快,但改变背景颜色的 css 属性现在不起作用。这是我的代码:
<div class="numpad" id="numpad" align="center">
<div style="display:flex;">
<kbd touchpad="call(1)">1
<div class="background"> </div>
</kbd>
<kbd touchpad="call(2)">2
<div class="background">ABC</div>
</kbd>
<kbd touchpad="call(3)">3
<div class="background">DEF</div>
</kbd>
</div>
角度指令:
angular.module('myApp').directive('numpad', function($log) {
return {
restrict: 'E',
templateUrl: 'html/directives/numpadOpenr.html',
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) {
scope.number = ngModel;
scope.call = function(number) {
var value = scope.number.$viewValue || '';
scope.number.$setViewValue(value + number);
};
scope.remove = function() {
var value = scope.number.$viewValue || '';
if (value.length > 0) {
scope.number.$setViewValue(value.substring(0, value.length - 1));
}
};
}
};
});
angular.module('myApp').directive("touchpad", [function () {
return function (scope, elem, attrs) {
elem.bind("touchstart click", function (e) {
e.preventDefault();
e.stopPropagation();
scope.$apply(attrs["touchpad"]);
});
}
}]);
CSS:
kbd, .key {
display: inline-block;
min-width: 2.2em;
font: normal .85em "Lucida Grande", Lucida, Arial, sans-serif;
text-align: center;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
color: #555;
}
kbd[title], .key[title] {
cursor: help;
}
kbd {
border: 1px solid #c4c6ca;
padding: 10px 20px;
background-color: transparent;
flex:1;
height: 2.2em;
}
kbd:active {
background: #e6e7e8;
}
.numpad kbd {
margin: 3px;
font-size: xx-large;
background-color: #ffffff;
}
kbd div.background {
font-size:x-small;
}
.numpad kbd:hover, .numpad kbd:active, .numpad kbd:focus {
background-color: #dceef7;
}
有人可以告诉我,css numpad kbd:active, numpad kbd:focus 是否可以使用与我使用 e.preventDefault() 和 e.stopPropagation() 相同的策略开始工作?
解决方案
我找到了一个解决方案,它有点难看但有效。如果添加一个有助于禁用进入 onclick 函数调用的超时函数,那么它将起作用。她是一个密码。
var doubleClickCheck = true;
scope.call = function(number) {
if (doubleClickCheck) {
var value = scope.number.$viewValue || '';
scope.number.$setViewValue(value + number);
reset();
}
};
scope.remove = function() {
if (doubleClickCheck) {
var value = scope.number.$viewValue || '';
if (value.length > 0) {
scope.number.$setViewValue(value.substring(0, value.length - 1));
}
reset();
}
};
function reset() {
doubleClickCheck = false;
$timeout(function () {
doubleClickCheck = true;
}, 150)
}
推荐阅读
- java - 生产高峰期的 java.net.SocketTimeoutException
- javascript - 如何在JS中的另一个函数中导入和使用函数
- php - 重定向到 if isset 按钮上的不同网页
- google-chrome - 更新到 google chrome 版本 74 后 data-toggle="collapse" 折叠时不能卡在一半
- python - 在没有numpy polyfit的python中拟合二次函数
- php - 从废弃的函数 create_function 迁移
- angular - 模块没有导出成员'Md5'?
- nginx - 只允许来自 IP 地址的 nginx 访问
- xamarin - 在 Xamarin.Forms 中导航或关闭应用程序时如何保存应用程序的状态?
- epplus - Excel 图表中的次轴