如何使圖像可點擊並執行功能？

我只是想讓圖像可點擊並執行功能。這裏是我的代碼：如何使圖像可點擊並執行功能？

<button class="button button-stable button-clear" on-click="myFunction()"> 
<img src="image.png" > 
</button>

但功能上沒有click事件執行。

來源

2016-02-17 user2985035

正確的屬性是'onclick'。或者，在角度上，我猜，「ng-click」。 – Dave

如果您將其中一個答案標記爲已接受，您將爲自己獲得兩個額外的信譽點。 –

使用角度，您應該使用ng-click。

嘗試ng-click="myFunction()"

來源

2016-02-17 18:20:58

嘗試把ng-click在<img>

例如

<img class="button " ng-src="{{i.imagem}}" ng-click="myFunction($index)"></img>

來源

2016-02-17 18:21:48 AdsHan

你可以做

<img src="image.png" ng-click="myFunction()" />

來源

2016-02-17 18:41:06

-1

你不必。有了一些額外的標記，你可以做到這一點。

裹圖像
設置爲一個隱藏按鈕ID
按鈕運行JS點擊

這樣做將是一個更訪問爲殘疾人解決方案。使用此html。

<!--html--> 
<label for="image-click"> 
    <img src="http://lorempixel.com/100/100" alt="" /> 
</label> 
<button id="image-click" 
    onclick="myFunction()" 
    class="visuallyhidden"> 
    Click to run image 
</button>

並添加一些CSS。

//css 
.visuallyhidden { 
    position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 1px; width: 1px; 
    margin: -1px; padding: 0; border: 0; 
} 
label { 
    cursor: pointer; 
}

這裏是一個codepen，演示如何 - http://codepen.io/bitlinguist/pen/bEJvoz

你可以很容易地採用具有角指令這種方法。

來源

2016-02-17 18:57:27 dewwwald

對這個問題過於複雜的解決方案。他正在使用Angular。 Angular有一個內置的功能。添加CSS，Jquery等是矯枉過正的。 –

@MikeFeltman不夠公平，但你應該閱讀，你會發現jQuery只是用於寫入正文的函數。簡化了插圖。所有你需要的是標記和CSS。 Visuallyhidden通常是sass框架的一部分，指針通常設置在標籤上。標籤[「for」]可用於指定。標記是可訪問的。但我不確定，如果alt標籤對於可點擊圖片來說足夠容易理解，或者如果angular正在使用某些東西來解決此問題。無論如何，感謝您的反饋。病毒更新沒有jQuery的答案。 – dewwwald

如何使圖像可點擊並執行功能？

回答

相關問題