【发布时间】：2016-07-21 08:34:58
【问题描述】：
您好，我有以下代码（请使用平板电脑）：
body {
font-family: Roboto;
box-sizing: border-box
}
.cContent {
display: flex;
flex-direction: column;
}
.cHeaders {
display: flex;
flex-direction: row;
}
.cHeader {
background-color: rgb(141, 141, 142);
color: white;
padding: 10px;
margin-left: 10px;
margin-bottom: 5px;
}
.cThemeHeader {
width: 300px;
}
.cItemHeader {
width: 300px;
}
.cCountHeader {
width: 80px;
text-align: center
}
.cData {
display: flex;
}
.cRow {
display: flex;
flex-direction: column;
}
.cItemRow {
display: flex;
width: 300px;
}
.cBox {
background-color: rgb(208, 229, 199);
color: #4a7f35;
padding: 10px;
margin-left: 10px;
margin-bottom: 5px;
}
.cTheme {
width: 300px;
}
.cItem {
background-color: white;
color: #4a7f35;
border: 1px solid #4a7f35;
padding-left: 5px;
padding-right: 5px;
margin-right: 10px;
cursor: pointer;
font-size: 12px;
height: 18px;
}
.cCount {
width: 80px;
background-color: #4a7f35;
color: white;
text-align: center
}
.cWindow {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
body {
font-family: Arial;
}
.cBox {
height: 30px;
font-size: 20px;
line-height: 30px;
}
.cItem {
height: 30px;
font-size: 20px;
line-height: 30px;
}
}<!doctype html>
<html ng-app="myApp" ng-controller="myController">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Langer Klick</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
angular.module("myApp", ['ngTouch']).controller("myController", function($scope) {
$scope.dataList = [{
id: 1,
count: 0,
text: 'Leistung nach Bedarf',
items: [{
id: 1,
text: 'bei Bedarf'
}]
}, {
id: 2,
count: 0,
text: 'Leistung je 2 stündlich',
items: [{
id: 1,
text: '11:00'
}, {
id: 2,
text: '15:00'
}]
}, {
id: 3,
count: 0,
text: 'Leistung auf einen fixen Zeitpunkt',
items: [{
id: 1,
text: '15:00'
}, {
id: 2,
text: '16:00'
}]
}];
$scope.isTablet = false;
$scope.hideBox = function(event) {
$(event.target).hide();
}
$scope.closeWindow = function() {
$scope.isTablet = false;
}
$scope.helloWorld = function() {
$scope.isTablet = true;
}
}).directive('onLongPress', function($timeout) {
return {
restrict: 'A',
link: function($scope, $elm, $attrs) {
$elm.bind('touchstart', function(evt) {
// Locally scoped variable that will keep track of the long press
$scope.longPress = true;
// We'll set a timeout for 600 ms for a long press
$timeout(function() {
if ($scope.longPress) {
// If the touchend event hasn't fired,
// apply the function given in on the element's on-long-press attribute
$scope.$apply(function() {
$scope.$eval($attrs.onLongPress)
});
}
}, 600);
});
$elm.bind('touchend', function(evt) {
// Prevent the onLongPress event from firing
$scope.longPress = false;
// If there is an on-touch-end function attached to this element, apply it
if ($attrs.onTouchEnd) {
$scope.$apply(function() {
$scope.$eval($attrs.onTouchEnd)
});
}
});
}
};
});
</script>
<script src="./removeItem.js"></script>
</head>
<body>
<div class="cContent">
<div class="cHeaders">
<div class="cHeader cThemeHeader">Katalog</div>
<div class="cHeader cItemHeader">Plan</div>
<div class="cHeader cCountHeader">Ist</div>
</div>
<div class="cData" ng-repeat="data in dataList">
<div class="cThemeRow">
<div class="cBox cTheme">{{data.text}}</div>
</div>
<div class="cBox cItemRow">
<div ng-repeat="item in data.items" class="cItem" ng-click="data.count = data.count + 1; hideBox($event);" on-long-press="helloWorld();">{{item.text}}</div>
</div>
<div class="cCountRow">
<div class="cBox cCount">{{data.count}}</div>
</div>
</div>
</div>
<div class="cWindow" ng-if="isTablet" ng-click="closeWindow();">HI, I'M A TEST WINDOW!</div>
</body>
</html>当我单击它时，我想删除白框.cItem（用鼠标正常单击或正常触摸单击）。这工作得很好。我还想在平板电脑上长按触摸打开一个窗口，但不移除盒子。长按触摸有效，它会打开窗口，但也会删除框（用平板电脑检查）。我怎样才能打开窗口而不删除它（只是on-long-press 的功能而不是ng-click）？我还想删除平板电脑上长按的默认设置（标记文本等），然后打开窗口。有任何想法吗？谢谢。
【问题讨论】：
标签： html angularjs long-press