假设我们要利用后端读取音频资源并输出到浏览器（可能做防盗链用）

    public function get_music(){
        ......

        $file_source = 'xxxx';  //音频文件的资源地址

        //检查文件是否存在
        if (! file_exists ($file_source)) {
            header('HTTP/1.1 404 NOT FOUND');
        } else {
            //获取文件Etag相同则返回304并结束运行本接口，使客户端读取缓存，否则附加Etag值返回客户端浏览器进行记录
            $Etag = md5_file($file_source); //获取文件md5，其实文件md5可用作Etag作为记录，校检文件是否改变。
            if(array_key_exists('HTTP_IF_NONE_MATCH', $_SERVER) and $_SERVER['HTTP_IF_NONE_MATCH'] == $Etag){
                header("HTTP/1.1 304 Not Modified");  //返回304
                exit();  //结束运行
            } else {
                header("Etag:" . $Etag);  //标记Etag
            }

            //以只读和二进制模式打开文件
            $file = fopen ( $file_source, "rb" );
            //文件大小
            $file_size = filesize($file_source);
            //请求范围的度量单位
            header("Accept-Ranges: bytes" );
            //文件名
            header("Content-Disposition: filename=" . $file_name );
            //缓存控制
            header("Cache-Control: public, max-age=31536000");
            //返回资源类型
            header("Content-Type: audio/mpeg");
            //文件真实大小
            header('Content-Length: ' . $file_size);
            //上次修改时间
            header('Last-Modified: '.gmdate('D, d M Y H:i:s',time())." GMT");
            //到期时间
            header('Expires: '.gmdate('D, d M Y H:i:s', time() + 3600*24*60)." GMT");
            //启用缓存
            header("Pragma: Pragma");

            //读取文件内容并直接输出到浏览器
            echo fread ( $file, filesize ( $file_source ) );
            fclose ($file);
            //exit(0);    //如果你在TP5框架中使用导致Content-Type无法更改，请加上此处让header生效
        }
    }

//根据网页id，取id里面的内容

function copyUrl2(id){
    var Url2=document.getElementById(id).innerText;
    var oInput = document.createElement('input');
    oInput.value = Url2;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.className = 'oInput';
    oInput.style.display='none';
}

前面说的是错误的做法，之后才开始注重起来。
【准备阶段】
先说一下我有一个处理缩略图的类，功能是可选的，比如可以单独以 ”宽“ 为基准设置缩略图，或者单独以 ”高“ 为基准制作缩略图。效果：假如选了宽度为 180 px（类中不含单位），那么高就通过算式自动降低比例与原图比例保持一致。反之亦然！
然后这个类我说一下，他只能这么用，要么用宽要么用高，如果宽高同时设置，那么他就直接将图片压扁了。所以只能设置 1 个为基准。
原图一律上传到临时文件夹，而真正发布时候才会生成缩略图，这一点由我其他方法完成略过。
然后缩略图的比例为 180px * 120px，如下：

一个帖最多可显示三个缩略图。
【一开始】
一开始是简单的将所有图都生成对应缩略图，当然宽全部是 180 px，自然高度无法确定，我前端做了 overflow:hidden 简单隐藏。因为宽度的生成已经被那个类定死了，所以不需要考虑宽度，只用jquery做了简单的高度居中。

自然有下列问题，当时只是懒得管将就一下，问题如下：
1.本身小于缩略图比例的图会被强制拉大到 180px
2.宽远长于高的图，在生成缩略图后，高自然降比就小于 120px 了

考虑到遇到的情况不算少，上面已经是整理出来的关键原因了，理一下思路，我在最后显示缩略图的那个类做了判断处理，识别原图的高宽把不符合的情况释放掉，只显示正常图片，但是，对于（宽高）大于 180 * 120 的图咋办？比例缩小后才会不符合条件，不在此判断范围内，于是我将所有的图都锁定比例降低至 宽一律为 180 的时候检查高度是否符合缩略图标准，不符合的释放掉。
但我遇到一个情况，就是正常的图也不见了，我看了下那个图，降低了他的宽至180，发现高度为119.5，与120差了0.5，我晕。这样牵扯的图实在太多了，得想个办法解决。于是就把后端的锁定比例检测的这一项去除。
【后来】
重新理了下思路，关键点在于释放不符合比例要求的图片还不够，生成缩略图的那个类也需要和显示缩略图的那个类一起处理完成这个任务才行。那就是在生成缩略图的类里得做个判断。
1.首先要符合大于缩略图的条件，180*120；
2.其次以宽为基准，降低至 180 并检查高度
3.在大于缩略图的情况下，就说明这张图有缩略的价值，但不符合条件2，那我就转换一个思维，瞬间切换成以高为基准生成缩略图。（没错，当宽度在180的情况下高度小于120，就代表其长大于其宽，我将转换以高为基准生成缩略图）
4.高度为 120 的情况下，宽度为多少不知道，后端显示的时候无需再次判断，将不符合条件的图释放掉。
5.前端做检测，将不符合的高宽各居中，如果都不符合条件则都居中，前端缩略图框 180 * 120全部都是占满的，不达到条件的图不会被显示，但确实都是一些真正小的图。
【重写整理】
1.拿到缩略图类后不急着生成，先锁定比例，以某以项属性为基准降比（比如 宽）。
2.将大于缩略图（符合缩略条件）比例，但在降比完成后又不符合缩略图要求的图，应该立刻切换成以另外一个基准生成缩略图（比如切换成 高）。
3.在缩略图的显示类，只需将不符合缩略图宽高要求的图片直接释放掉，不会显示在帖子首页。（无需锁定比例在检查，因为缩略图生成类已经完成不会生成对应缩略图）
4.前端控制图片居中
【最终】
不管啥类型的图，上传后显示到首页的缩略图，大小，值，宽高和清晰度都是完美的。

click与blur、focus的关系想必大家都清楚，mousedown的优先级是高于click的，在focus之前触发，而这样，这个问题就可以迎刃而解。
想要在鼠标离开焦点区域外点击某些特定元素不触发焦点离开事件，只需要在指定元素加上一个
onmousedown="return false"
即可。
如图所示：

如下代码：