warnDefault и stopPropagation не позволят изменить свойство css div - PullRequest
Новая
       9

warnDefault и stopPropagation не позволят изменить свойство css div

0 голосов
/ 07 сентября 2018

Я работаю на сенсорном экране и переключаюсь с onclick на div на touchstart, чтобы скорость клика работала быстро.Но проблема в том, что использование этого способа, когда я касаюсь события div, работает быстро, но свойство css для изменения цвета фона сейчас не работает.Вот мой код: 

<div class="numpad" id="numpad" align="center">
    <div style="display:flex;">
        <kbd touchpad="call(1)">1
            <div class="background">&nbsp;</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 ()?

1 Ответ

0 голосов
/ 07 сентября 2018

Я нашел решение немного уродливым, но работающим. Если добавить функцию тайм-аута, которая поможет отключить вход в вызов функции 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)
            }
...