SweetAlert 弹窗的时候会擅自滚动页面到顶端,怎么禁止滚动?[找到解法三!]

如下图所示,准备删除页面底部一篇文章,点击删除按钮后 SweetAlert 弹窗询问是否真要删除。问题是:弹窗的时候,页面也被 SweetAlert 滚动到最顶端了。我不希望它滚动,求禁止滚动的方法,谢谢!
Laravel
产生这个问题的原因,跟我写的代码无关,这应该是 SweetAlert 插件自身的问题。我直接从 https://sweetalert.bootcss.com/guides/ 这个网站复制了一段代码,同样存在这个问题。我复制的代码内容如下

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

现在回想起来,问题出在了 href='#' 这上面,SweetAlert 插件本身没有问题!

《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
最佳答案

执行这个代码之前,用 e.preventDefault(); 阻止其他的event试试
代码可能就是这样子

$('[name=btn_delete]').on('click', function(e) {
    e.preventDefault();

    swal({ 
        title:  "Are you sure?", 
        text:  "Once deleted, you will not be able to recover this imaginary file!", 
        icon:  "warning", 
        buttons:  true, 
    dangerMode:  true,  })
    .then((willDelete)  =>  { 
        if  (willDelete)  {  
            swal("Poof! Your imaginary file has been deleted!",  { 
                icon:  "success",  });  
            }  else  {  
                swal("Your imaginary file is safe!");  
            }
        });
});
4年前 评论
zhaiduting (楼主) 4年前
讨论数量: 5

纯猜测:你的删除按钮是不是用的链接,然后 href="#"

4年前 评论
largezhou (作者) 4年前
zhaiduting (楼主) 4年前
zhaiduting (楼主) 4年前

执行这个代码之前,用 e.preventDefault(); 阻止其他的event试试
代码可能就是这样子

$('[name=btn_delete]').on('click', function(e) {
    e.preventDefault();

    swal({ 
        title:  "Are you sure?", 
        text:  "Once deleted, you will not be able to recover this imaginary file!", 
        icon:  "warning", 
        buttons:  true, 
    dangerMode:  true,  })
    .then((willDelete)  =>  { 
        if  (willDelete)  {  
            swal("Poof! Your imaginary file has been deleted!",  { 
                icon:  "success",  });  
            }  else  {  
                swal("Your imaginary file is safe!");  
            }
        });
});
4年前 评论
zhaiduting (楼主) 4年前

谢谢大家的热心帮助!最佳答案已经由 songxue77 给出了。我的删除按钮是

 <a href="#" @click="handleDelete(article, $event); return false;"></a>

//上面是vue模版里的删除按钮,下面是执行脚本

handleDelete(article, e) {
    e.preventDefault() //必须的,防止弹窗时滚动页面!
    swal({
        title: "确定删除吗?",
        icon: "warning",
        buttons: ['取消', '确定'],
        dangerMode: true,
    })
        .then((willDelete) => {
            if (willDelete) {
                axios.delete('/article/delete/'+article.id)
                    .then(()=>{
                        article.deleted=true; // props虽然不能被改变,但是可以给它加个键值对
                        this.$forceUpdate()  //妙!强制刷新DOM,将被删除的项目隐藏掉
                    })
            }
        });
}

还有第二种解决方法,参见1楼 largezhou 给出的解答。

4年前 评论

刚才温习了vue官方文档的事件修饰符小节内容,自己找到了解决方法3,供大家参考(灵感来自 songxue77 给出的解决方案,这里只是应用到 Vue 环境下的另一种写法而已)

<a href="#" @click.prevent="handleDelete(article)"></a>

//以上vue模版里的链接删除了第2个参数,并删除了没生效的 return false 语句
//注意:@click.prevent 增加了事件修饰符 prevent
//以下为执行脚本

handleDelete(article) {
    // e.preventDefault() // 使用了事件修饰符,可以删掉本行及第2个参数
    swal({
        title: "确定删除吗?",
        icon: "warning",
        buttons: ['取消', '确定'],
        dangerMode: true,
    })
        .then((willDelete) => {
            if (willDelete) {
                axios.delete('/article/delete/'+article.id)
                    .then(()=>{
                        article.deleted=true; // 标记文章为已删除
                        this.$forceUpdate()  // 强制刷新DOM,隐藏已删除的
                    })
            }
        });
}
4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!