如何实现长按删除

fish_whale 2017-09-04 05:23:55

请问如何实现长按某一项时，出现遮罩层，点击这遮罩层的删除时，删除长按的那一项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="telephone=no" name="format-detection">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>选择爱车</title>
<style type="text/css">
.car{
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.deleteBk{
position: fixed;
top:0;
left: 0;
bottom: 0;
right:0;
background:rgba(0,0,0,0.8);
}
.deleteMes{
position: fixed;
top:45%;
width: 80%;
height: 40px;
line-height: 40px;
left: 10%;
background: #fff;
text-align: center;
}
.deleteBox{
display: none;
}
</style>

</head>
<body>
<div class="carBox">
<div class="car cara">aa</div>
<div class="car carb">bb</div>
<div class="car carc">cc</div>
<div class="car card">dd</div>
<div class="car care">ee</div>
<div class="car carf">ff</div>
<div class="car carg">gg</div>
</div>

<div class="deleteBox">
<div class="deleteBk"></div>
<div class="deleteMes">删除</div>
</div>
</body>
</html>

...全文

456 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

fish_whale 2017-09-05

打赏
举报

总之，谢谢大家了

fish_whale 2017-09-05

打赏
举报

引用 4 楼 laolaixuebiancheng 的回复:

[quote=引用 2 楼 fish_whale 的回复:] [quote=引用 1 楼 functionsub 的回复:]
var timer , holdTime = 2000;
document.body.mousedown = function(){
    timer = setTimeout(function(){
        alert('长按了');
    },holdTime);
}

document.body.mouseup = function(){
    if(timer){
        clearTimeout(timer);
        timer = undefined;
    }
}
你的代码太长，懒得看，意思大概就是这么个意思。

你的这个不起作用。。。[/quote] 他的意思是你把alert语句换成你要的删除语句就完事了[/quote] 我知道是要换掉我要删除的语句，笑哭.jpg

laolaixuebiancheng 2017-09-05

打赏
举报

引用 2 楼 fish_whale 的回复:

[quote=引用 1 楼 functionsub 的回复:]

var timer , holdTime = 2000;
document.body.mousedown = function(){
    timer = setTimeout(function(){
        alert('长按了');
    },holdTime);
}

document.body.mouseup = function(){
    if(timer){
        clearTimeout(timer);
        timer = undefined;
    }
}

你的代码太长，懒得看，意思大概就是这么个意思。

你的这个不起作用。。。[/quote] 他的意思是你把alert语句换成你要的删除语句就完事了

Go 旅城通票 2017-09-05

打赏
举报

20分。。楼猪你也好意思。。结贴收回一半，就是10分一个问题。。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>选择爱车</title>
    <style type="text/css">
        .car {
            width: 100%;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }

        .deleteBk {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0,0,0,0.8);
        }

        .deleteMes {
            position: fixed;
            top: 45%;
            width: 80%;
            height: 40px;
            line-height: 40px;
            left: 10%;
            background: #fff;
            text-align: center;
        }

        .deleteBox {
            display: none;
        }
    </style>

</head>
<body>
    <div class="carBox">
        <div class="car cara">aa</div>
        <div class="car carb">bb</div>
        <div class="car carc">cc</div>
        <div class="car card">dd</div>
        <div class="car care">ee</div>
        <div class="car carf">ff</div>
        <div class="car carg">gg</div>
    </div>
    <!--删除-->
    <div class="deleteBox">
        <div class="deleteBk"></div>
        <div class="deleteMes">删除</div>
    </div>
</body>
</html>
<script src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script>
    var delay = 1000, timer, div;
    function showDel() {
        $('div.deleteBox').show()
    }
    $('div.car').mousedown(function () { div = this; timer = setTimeout(showDel, delay) }).mouseup(function () { clearTimeout(timer) });
    $(document).click(function (e) {
        if (e.target.className == 'deleteMes') { $(div).remove() }
        $('div.deleteBox').hide()
    });
</script>

Web开发学习资料推荐
easyui datebox只显示年月选择，隐藏日期

fish_whale 2017-09-05

打赏
举报

引用 1 楼 functionsub 的回复:

var timer , holdTime = 2000;
document.body.mousedown = function(){
    timer = setTimeout(function(){
        alert('长按了');
    },holdTime);
}

document.body.mouseup = function(){
    if(timer){
        clearTimeout(timer);
        timer = undefined;
    }
}

你的代码太长，懒得看，意思大概就是这么个意思。

你的这个不起作用。。。

functionsub 2017-09-04

打赏
举报

var timer , holdTime = 2000;
document.body.mousedown = function(){
    timer = setTimeout(function(){
        alert('长按了');
    },holdTime);
}

document.body.mouseup = function(){
    if(timer){
        clearTimeout(timer);
        timer = undefined;
    }
}

你的代码太长，懒得看，意思大概就是这么个意思。