iOS jquery ui 日期选择器的奇怪 touch/click 行为

Question

我有一个带有以下指令的 angular 应用程序：

'use strict';

/**
 * Simple date picker
 */
angular.module('twicketsApp').directive('twicketsDatePickerSimple', [function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {

            function initDatepicker() {
                element.click(function() {console.log('datepicker clicked');});
                element.datepicker({
                    dateFormat: 'yy-mm-dd',
                    changeMonth: false,
                    changeYear: false,
                    minDate: scope.futureOnly ? 0 : null,
                    maxDate: scope.futureOnly ? 365 : null,
                    onSelect: function (date) {
                        ngModel.$setViewValue(date); // update date value back to the model
                    },
                    beforeShow: function(input, inst) {
                        inst.dpDiv.addClass('simple-date-panel');
                    }
                });
            }

            attrs.$observe('futureOnly', function (value) {
                scope.futureOnly = value === 'true' ? true : false; // attrs come in as a string
                initDatepicker();
            });

        }
    };
}]);

如您所见，此元素上既有点击处理程序又有日期选择器（点击处理程序仅用于调试）。

当我轻轻触摸任何 iOS 中的 safari 中的元素时，点击处理程序会触发 - 但日期选择器不会打开。但是，如果我用力按压，日期选择器会打开（这不是长按，因为长按不会触发点击处理程序或打开日期选择器）。

完全不知道为什么会这样。有什么想法吗？

我的项目使用了 fastclick，这可能会产生影响。

Answer 1

修复了以下肮脏的 hack，认为我可以这样做，但希望有更好的解决方案。

           ...

 function initDatepicker() {
    element.click(function() {element.datepicker( "show" );});
    element.datepicker({

           ...

Answer 2

对于移动和可触摸设备或屏幕 Jquery UI Datepicker 初始化 datepicker 组件但从不触发 "show" 方法。然后你可以使用这样的东西：

$(".datepicker").datepicker();

$(".datepicker").on("click", function () {
    $(this).datepicker("show");
});

iOS jquery ui 日期选择器的奇怪 touch/click 行为

Weird touch/click behaviour with jquery ui datepicker on iOS

javascript

jquery

datepicker

ios

angularjs