我如何在点击时显示图像 src答案

【问题标题】：How i show image src on click我如何在点击时显示图像 src
【发布时间】：2020-12-04 05:47:33
【问题描述】：

编写一个函数，当您在网站上按下其中一张图片的右键时调用该函数。
该函数调用一个确认（）窗口，您可以在其中询问用户是否想知道图像的来源
如果用户点击 OK 警报 (this.src)，它会显示该图像的 src 属性的内容
如果用户单击取消，则禁用出现在按右键

这是我的错误代码

<img src="opera1.png" id="immagine1" alt="immagine1" width="500" height="333" oncontextmenu="destra()">
<img src="ioaparatissima.JPG" id="immagine2" alt="immagine2" width="500" height="333" oncontextmenu="destra()">

javascript

function destra(){
  var r = confirm("Vuoi conoscere la src dell'immagine");

  if(r == true) {
    alert(y.src);
  } else {
  }
}

【问题讨论】：

标签： javascript image this src confirm

【解决方案1】：

由于您使用的是内联事件绑定，我建议您进行两项更改。

oncontextmenu="destra(this)"

传入内联事件绑定开启的元素。

function destra(y){
  var r = confirm("Vuoi conoscere la src dell'immagine");

  if(r == true) {
    alert(y.src);
  } else {
  }
}

接受元素作为方法参数。

【讨论】：

【解决方案2】：

通过重读您的陈述，在我看来，这个答案对应得更好......（？）

document.querySelectorAll('img').forEach(el=> el.addEventListener('contextmenu',destra) )
 
function destra(e)
  {
  e.preventDefault() // disable real context Menu

  if ( confirm("Vuoi conoscere la src dell'immagine") )
    {
    alert( this.src )
    }
  }

<img src="https://picsum.photos/150" alt="immagine1" >

<img src="https://picsum.photos/100" alt="immagine2" >

【讨论】：

【解决方案3】：

使用getElementById()，如本例所示：

function destra() {
    let r = confirm("Vuoi conoscere la src dell'immagine?");
    let y = document.getElementById("immagine1");
    if (r == true) {
        alert(y.src);
    }
}

【讨论】：

【解决方案4】：

试试这样...我希望这个有用...

<img src="opera1.png" id="img1" alt="immagine1" width="500" height="333">
<button onclick="getimgId(1)">copy link</button>
<br/>
<img src="ioaparatissima.JPG" id="img2" alt="immagine2" width="500" height="333">
<button onclick="getimgId(2)">copy link</button>

<script type="text/javascript">
    function getimgId(img_id){
        var res = confirm("Vuoi conoscere la src dell'immagine");

        if(res == true) {
            var img_id = img_id;
            var img_url = document.getElementById('img'+img_id).src;
            alert(img_url);
        } else {

        }
    }
</script>

现在您只想为图像提供唯一的 id 以及图像的右侧按钮...

像 img1, img2, img3 for images and onclick="getimg(1)", getimg(2), getimg(3)...

您可以使用 Javascript 轻松分配唯一 ID。只需应用循环并在循环内添加具有唯一 ID 的 imgs...

对于分配唯一我在下面分享示例...下面的代码仅供您参考。根据您的需要进行更改。您可以在 google 上搜索更多示例。

for(var i=0;i<yourRecordArray.length;i++){
    newList = document.createElement('li');
    newList.className = 'list-border';
    newList.id = 'imgdiv'+i;
    newList.innerHTML = '<img src="" id="img'+i+'">+
                        '<button onclick="">';
    document.getElementById('add').appendChild(newList);

【讨论】：

【解决方案5】：

我是这样解决的

function destra(y) {

    window.addEventListener("contextmenu", function(e){e.preventDefault();}, false);

    var r = confirm("do you want to know the src of the image?");

  if(r == true) {
    alert(y.src);
  } else {

  }

}

<img src="https://picsum.photos/150" alt="immagine1"id="immagine1" alt="immagine1" width="150" height="150" oncontextmenu="destra(this)">
<img src="https://picsum.photos/150" alt="immagine2" id="immagine2" alt="immagine2" width="150" height="150" oncontextmenu="destra(this)">

【讨论】：