在做html5项目的时候有个需求是要拖动一个图片,但是又不要用户长时间按着弹出保存框。首先想到的就是在点图片的时候阻止默认事件的发生:

js停止冒泡·

function myfn(e){

window.event? window.event.cancelBubble = true : e.stopPropagation(); }

js阻止默认行为

function myfn(e){
window.event? window.event.returnValue = false : e.preventDefault();
}

防止冒泡

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true·

stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。什么是冒泡事件?如在一个按钮是绑定一个”click”事件,那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。

阻止默认行为

w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;·

preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。

还有一个比较强悍的return false

javascript的return false只会阻止默认行为,而是用jquery的话则既阻止默认行为又防止对象冒泡。

话说回来在项目中无论使用哪种方法动达不到效果;没办法该页面结构,吧img外面套个div,在img上阻止默认事件,拖动div动从而实现拖动图片的目的。但是在阻止图片默认事件时还是阻止不了,查资料找到了  -webkit-touch-callout:none;即为禁用长按页面时的弹出菜单但是用在项目中一点用没有。于是接着找终于找到了pointer-events: none;点击穿透,这里有一篇博友写的介绍http://www.cnblogs.com/92cz/p/5787693.html  我就不再详细说了,最后没用js就把问题解决了太高兴啦,本项目还有另一种解法就是把图片弄成背景图,但是项目已经在测试了 只能用比较简单,保证效果的方法。

html 移动端关于长按图片弹出保存问题的更多相关文章

  1. 前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)

    <img src="{$vo.photo}" height="50px" onclick="showdiv({$i});"> & ...

  2. 改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox)

    下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下:   像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打 ...

  3. jQuery效果之封装一个文章图片弹出放大效果

    首先先搭写一个基本的格式: $.fn.popImg = function() { //your code goes here } 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部, ...

  4. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  5. Android ListView 长按列表弹出菜单

    Android ListView 长按列表弹出菜单 设置长按菜单 listView.setOnCreateContextMenuListener(new View.OnCreateContextMen ...

  6. asp.net导出excel并弹出保存提示框

    asp.net导出excel并弹出保存提示框 2013-07-12 | 阅:1  转:78   |  分享  腾讯空间 人人网 开心网 新浪微博 腾讯微博 搜狐空间 推荐给朋友 举报          ...

  7. CEfSharp下载文件 弹出保存框,实现 IDownloadHandler 接口

    上节讲了如何将CefSharp集成到C#中,但集成后将web界面链接进ChromiumWebBrowser后,但web界面上下载附件的功能不好使咯. 百度了半天还是没搞定,只能去看官网的Excampl ...

  8. POI导出Excel不弹出保存提示_通过ajax异步请求(post)到后台通过POI导出Excel

    实现导出excel的思路是:前端通过ajax的post请求,到后台处理数据,然后把流文件响应到客户端,供客户端下载 文件下载方法如下: public static boolean downloadLo ...

  9. 使用CEfSharp之旅(3)下载文件 弹出保存框 IDownloadHandler

    原文:使用CEfSharp之旅(3)下载文件 弹出保存框 IDownloadHandler 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群 ...

随机推荐

  1. 33.Qt模型与视图

    #include "mainwindow.h" #include <QApplication> #include <QAbstractItemModel> ...

  2. 利用IOC—— Castle进行对象映射,以及结合Nhibernate访问数据库

    相信很多人对IOC这个概念并不陌生,简而言之其核心就是利用反射来创建对象来实现解耦. 具体这么做解耦的好处是什么,因为鄙人做的项目还不多,所以还没体会到. 但好的项目大概是这样的 就是实现“高内聚,低 ...

  3. 异步编程(二)基于事件的异步编程模式 (EAP)

    一.引言 在上一个专题中为大家介绍了.NET 1.0中提出来的异步编程模式——APM,虽然APM为我们实现异步编程提供了一定的支持,同时它也存在着一些明显的问题——不支持对异步操作的取消和没有提供对进 ...

  4. 用Latex做介绍自己和团队科研的网页

    最近实验室师妹用网上的一些模板改了改做了几个网页.感觉还可以.但是实际上总觉得好像和韩家炜.周志华他们的页面差点什么. 最近找论文时发现奥地利的hornik老先生页面居然latex做的,然后找到了下面 ...

  5. thrift-go(golang)Server端笔记

      1.从thrift源码中拷贝go语言包(thrift\lib\go\thrift),放到go/src/下 2.新建go项目,实现server端服务接口   package main   impor ...

  6. oracle数据库 sqlplus

  7. Django框架 part 2

    web 框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impo ...

  8. Java用freemarker导出Word 文档

    1.用Microsoft Office Word打开word原件: 2.把需要动态修改的内容替换成***,如果有图片,尽量选择较小的图片几十K左右,并调整好位置: 3.另存为,选择保存类型Word 2 ...

  9. node——post提交新闻内容

    获取用户post提交的数据分多次提交,因为post提交数据的时候,数据量可能比较大,会要影响服务器中获取用户所以.提交的所有数据,就必须监听request事件.那么,什么时候才表示浏览器把所有数据提交 ...

  10. IOS - 6\7下UINavigationBar的颜色的方法改变 ——转载http://www.th7.cn/Program/IOS/201310/155057.shtml

    IOS7下设置UINavigationBar的颜色的方法已经改变(当然如果是用自定义图片的话请忽略---) 首先是区别iOS7和之前版本的方法如下: //如果是iOS7以前的话if (floor(NS ...