页面水印问题

为了保证数据的安全，使得信息的传播可以追溯，和微博图片右下角的水印类似，一些站点会要求加上自己的专属水印。
为了显示的需要，我把其中一个水印颜色做了处理，大致效果如下：

image.png

以下为同事提供的一个水印生成脚本

var isIE9 = document.all && document.addEventListener && !window.atob;
var WaterMark = {
    WaterMarkModel: {
        frontX: "",
        frontY: "",
        frontRows: "",
        frontCols: "",
        maskTxt: "",
        color: '#000000',
        width: 130,
        height: 50,
        fontSize: '18px',
        frontFont: '微软雅黑',
        frontBackgroundAlpha: 0,
        frontTxtAlpha:0.03,//隐藏水印，通过PS软件调整对比度可以看到底色// 0.1,
        angle: 15,
        frontXSpace: 150,
        frontYSpace: 30,
        backgroundColor: '#000000'
    },
    Init: function () {
        WaterMark.CreateWaterMark();
    },
    CreateWaterMark: function () {
        var oTemp = document.createDocumentFragment();
        var frontXSpace = WaterMark.WaterMarkModel.frontXSpace;
        var frontYSpace = WaterMark.WaterMarkModel.frontYSpace;
        var frontRows = WaterMark.WaterMarkModel.frontRows;
        var frontCols = WaterMark.WaterMarkModel.frontCols;
        var frontX = WaterMark.WaterMarkModel.frontX;
        var frontY = WaterMark.WaterMarkModel.frontY;
        var maskTxt = WaterMark.WaterMarkModel.maskTxt;
        var frontTxtAlpha = WaterMark.WaterMarkModel.frontTxtAlpha;
        var fontSize = WaterMark.WaterMarkModel.fontSize;
        var frontFont = WaterMark.WaterMarkModel.frontFont;
        var width = WaterMark.WaterMarkModel.width;
        var height = WaterMark.WaterMarkModel.height;
        var angle = WaterMark.WaterMarkModel.angle;
        var color = WaterMark.WaterMarkModel.color;  
        var maxWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth) - 20;
        var maxHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - 20;
        if (frontCols == 0 || (parseInt(frontX + width * frontCols + frontXSpace * (frontCols - 1)) > maxWidth)) {
            frontCols = parseInt((frontXSpace + maxWidth - frontX) / (width + frontXSpace));
            frontXSpace = parseInt(((maxWidth - frontX) - width * frontCols) / (frontCols - 1));
            if (!frontXSpace) {
                frontXSpace = 0;
            }
        }
        if (frontRows == 0 || (parseInt(frontY + height * frontRows + frontYSpace * (frontRows - 1)) > maxHeight)) {
            frontRows = parseInt((frontYSpace + maxHeight - frontY) / (height + frontYSpace));
            frontYSpace = parseInt(((maxHeight - frontY) - height * frontRows) / (frontRows - 1));
            if (!frontYSpace) {
                frontYSpace = 0;
            }
        }
        var x;
        var y;
        for (var i = 0; i < frontRows; i++) {
            y = frontY + (frontYSpace + height) * i;
            for (var j = 0; j < frontCols; j++) {
                x = frontX + (width + frontXSpace) * j;

                var maskDiv = document.createElement('div');
                var m = WaterMark.GetRotation(-angle);
                maskDiv.id = 'mask_div' + i + j;  
                maskDiv.appendChild(document.createTextNode(maskTxt));
                maskDiv.style.webkitTransform = "rotate(-" + angle + "deg)";
                maskDiv.style.MozTransform = "rotate(-" + angle + "deg)";
                maskDiv.style.msTransform = "rotate(-" + angle + "deg)";
                maskDiv.style.OTransform = "rotate(-" + angle + "deg)";
                maskDiv.style.transform = "rotate(-" + angle + "deg)";
                maskDiv.style.visibility = "";
                maskDiv.style.position = "absolute";
                maskDiv.style.left = x + 'px';
                maskDiv.style.top = y + 'px';
                maskDiv.style.overflow = "hidden";
                //mask_div.style.border="solid #eee 1px";
                maskDiv.style.opacity = frontTxtAlpha;
                if (isIE9) {
                    maskDiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + frontTxtAlpha * 100 + ")";
                } else {
                    maskDiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + frontTxtAlpha * 100 + ") progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + m[0] + ", M12=" + m[1] + ", M21=" + m[2] + ", M22=" + m[3] + ")";
                }
                maskDiv.style.fontSize = fontSize;
                maskDiv.style.fontFamily = frontFont;
                maskDiv.style.color = color;
                maskDiv.style.textAlign = "center";
                maskDiv.style.width = width + 'px';
                maskDiv.style.height = height + 'px';
                maskDiv.style.display = "block";
                maskDiv.style.zIndex = "2";
                oTemp.appendChild(maskDiv);
            };
        };
        document.body.appendChild(oTemp);
    },
    GetRotation: function (deg) {
        var deg2Rad = Math.PI * 2 / 360;
        var rad = deg * deg2Rad;
        var costheta = Math.cos(rad);
        var sintheta = Math.sin(rad);
        var m11 = costheta;
        var m12 = -sintheta;
        var m21 = sintheta;
        var m22 = costheta;
        return [m11, m12, m21, m22];
    }
};

页面引入以上的js 文件，调用方法如下：

      //WaterMarkdom 要显示水印的页面元素的id
       var relation = document.getElementById('WaterMarkdom');
        var relationTop = relation.offsetTop;
        var relationHeight = relation.offsetHeight;
        var relationWidth = relation.offsetWidth;
        var relationLeft = relation.offsetLeft;
        WaterMark.WaterMarkModel.maskTxt = '我是水印';//水印文字
        WaterMark.WaterMarkModel.frontX = relationLeft;
        WaterMark.WaterMarkModel.frontY = relationTop;
        WaterMark.WaterMarkModel.frontXSpace = 20;
        WaterMark.Init();

水印生成成功，要是这么简单就好了。同事写的脚本原理是在页面上方生成绝对定位的浮动层，即每个水印标签都是一个反转透视的浮动div。那么如果你的div区域还有事件热点区域就惨了，比如我的这个页面要支持滑动，手指上移或者下移要触发页面滚动事件，实际操作时，手指与屏幕的接触位置可能是水印，接触点不在事件的有效元素。
如图，水印所在位置形成了一个事件盲点区域。

image.png

为了解决这个问题，我首先尝试手指接触到屏幕时，隐藏水印，但没什么卵用，因为touchstart已经触发。然后我尝试将水印层下移，即z-index比当前层低一层，设置页面整体的透明度，这个效果可以实现，但真个页面的呈现效果会变得比较诡异。
上线在即，我又开始各种检索，最后一个知乎网友处找到方案，但仅支持css3标准，不管啦，问题已经部分解决。万能的简友，有好的方案请一定要给我留言。
什么，你说解决方案。差点忘了，是这样的。首先在脚本里面增加一句，给每个水印加个class属性：

 maskDiv.className = "mask_div";

然后在样式表里增加一句：

.mask_div { pointer-events: none;}

关于该属性的说明如下：

image.png