Question

我需要在页面上给出一个区域，用户可以在该区域中单击该区域。当用户点击时，我想将他们点击页面的地方导入到javascript变量中。例如，如果他们点击页面的中心，我希望javascript变量为＆＃34; 50％50％＆＃34;如果他们点击了页面的左下角，那就是＆＃34; 0％0％＆＃34;等等。我该怎么做？并请只有Javascript和HTML和CSS。没有JQuery

Answer 1

这段代码应该是你开始的好地方......

请参阅：http://jsfiddle.net/22rx6wp5/

var clickArea = document.getElementById ('click-area');
var percents = document.getElementById ('percents');
var clickRect = clickArea.getBoundingClientRect ();
var x, y, xp, yp, percentages;

// Click function
clickArea.onclick = function (event) {
    var cx, cy;

    // Get click position
    if (navigator.appVersion.indexOf('MSIE') != -1) {
        cx = event.clientX;
        cy = event.clientY;
    } else {
        cx = event.pageX;
        cy = event.pageY;
    }

    // Relate position to element position on page
    x = cx - this.offsetLeft;
    y = cy - this.offsetTop;

    // Calculate position in percentage
    xp = Math.round ((x / clickRect.width) * 100);
    yp = Math.round ((y / clickRect.height) * 100);

    // Percentages text
    percentages = xp + '% ' + yp + '%';

    // Display percentages in percents span
    percents.textContent = percentages;

    // Display percentages in browser console
    console.log (percentages);
};

如何在页面中的任何位置点击，然后查看他们点击的页面中的css precent

1 个答案: