ASP.NET將參數傳遞給母版頁中的Javascript函數

Question

我有一個調整大小的腳本，我從SO上找到的答案得到了。

<script type="text/javascript">
  function resizeImg(img)
  {
    var resize = 150;
    var origH  = 61;
    var origW  = 250;
    var mouseX = event.x;
    var mouseY = event.y;
    var newH   = origH * (resize / 100);
    var newW   = origW * (resize / 100);

    img.style.height = newH;
    img.style.width  = newW;

    var c = img.parentNode;

    c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
    c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;
  }
</script>

它位於我頁面中的HEAD占位符標記中。

在同一頁面中，在內容占位符中，我有一個<img>標簽需要運行“onclick”上方的功能。

因此，它需要像這樣返回'this'：

<img src="someImage.jpg" alt="" onclick="resizeImg(this)" />

但是，這不起作用。 我不知道如何做到這一點，我試圖搜索谷歌一段時間，但沒有出現。

Answer 1

不確定您復制源的位置。 我懷疑event.x ， event.y - 你不應該使用clientx和clienty屬性。 此外，對於跨瀏覽器，您需要管理事件引用，並且可以從事件對象的目標獲取圖像元素。

無論如何，嘗試修改代碼如下：

<script type="text/javascript">

    function resizeImg(e)   {     
        var event = window.event || e;
        var img = event.target || event.srcElement;
        var resize = 150;     
        var origH  = 61;     
        var origW  = 250;     
        var mouseX = event.clientX;     
        var mouseY = event.clientY;     
        var newH   = origH * (resize / 100);     
        var newW   = origW * (resize / 100);      
        img.style.height = newH + 'px';     
        img.style.width  = newW + 'px';      
        var c = img.parentNode;      
        c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;     
        c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;   
}

</script>
<div>
<img src="someImage.jpg" alt="" onclick="resizeImg(event)" />
</div>

我已經創建了相同的jsfiddle 。

最后，考慮使用諸如jquery之類的生產力庫，這將使事情變得更加簡單。

Answer 2

您不需要通過參數列表傳遞this的引用，因為函數中已存在上下文。 將您的標記更改為：

<img src="someImage.jpg" alt="" onclick="resizeImg();" />

然后在javascript函數resizeImg你可以簡單地使用this來引用點擊的圖像：

function resizeImg() {
    var img = this; // will contain a reference to your element
}

這是一個用DIV元素做同樣事情的工作示例 。