html中如何給圖片添加點擊事件的詳解

先使用jQuery選擇器獲取到想要綁定click事件的img元素，然后可以直接綁定click方法，也可以通過bind方法綁定。這里詳細介紹一下bind方法。jQuery 事件 - bind() 方法 —— 定義和用法

html中如何給圖片添加點擊事件的詳解

bind() 方法為被選元素添加一個或多個事件處理程序，并規定事件發生時運行的函數。

jQuery 事件 - bind() 方法 ——將事件和函數綁定到元素

規定向被選元素添加的一個或多個事件處理程序，以及當事件發生時運行的函數。

jQuery 事件 - bind() 方法——語法

1 $(selector).bind(event,data,function)

jQuery 事件 - bind() 方法——參數描述

event 必需。規定添加到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。

data 可選。規定傳遞到函數的額外數據。

function 必需。規定當事件發生時運行的函數。

實例：

1 //直接給所有img標簽綁定click事件

2 $("img").click(function(){

3 alert('你點擊了圖片');

4 })

6 //使用bind方法綁定click事件

7 $("img").bind("click",function(){

8 alert('你點擊了圖片');

9 })

Html 的img標簽添加點擊事件

1 package com.topnews;

3 import java.util.ArrayList;

5 import android.annotation.SuppressLint;

6 import android.app.Activity;

7 import android.app.Fragment;

8 import android.content.Context;

9 import android.content.Intent;

10 import android.graphics.Bitmap;

11 import android.os.AsyncTask;

12 import android.os.Bundle;

13 import android.text.TextUtils;

14 import android.util.Log;

15 import android.view.View;

16 import android.view.ViewGroup.LayoutParams;

17 import android.webkit.WebChromeClient;

18 import android.webkit.WebSettings;

19 import android.webkit.WebView;

20 import android.webkit.WebViewClient;

21 import android.webkit.WebSettings.LayoutAlgorithm;

22 import android.widget.Button;

23 import android.widget.FrameLayout;

24 import android.widget.ProgressBar;

25 import android.widget.TextView;

27 import com.topnews.base.BaseActivity;

28 import com.topnews.bean.NewsEntity;

29 import com.topnews.service.NewsDetailsService;

30 import com.topnews.tool.BaseTools;

31 import com.topnews.tool.DataTools;

32 import com.topnews.tool.DateTools;

34 @SuppressLint("JavascriptInterface")

35 public class DetailsActivity extends BaseActivity {

36 private TextView title;

37 private ProgressBar progressBar;

38 private FrameLayout customview_layout;

39 private String news_url;

40 private String news_title;

41 private String news_source;

42 private String news_date;

43 private NewsEntity news;

44 private TextView action_comment_count;

45 WebView webView;

47 @Override

48 protected void onCreate(Bundle savedInstanceState) {

49 // TODO Auto-generated method stub

50 super.onCreate(savedInstanceState);

51 setContentView(R.layout.details);

52 setNeedBackGesture(true);// 設置需要手勢監聽

53 getData();

54 initView();

55 initWebView();

56 }

58 /* 獲取傳遞過來的數據 */

59 private void getData() {

60 news = (NewsEntity) getIntent().getSerializableExtra("news");

61 news_url = news.getSource_url();

62 news_title = news.getTitle();

63 news_source = news.getSource();

64 news_date = 65DateTools.getNewsDetailsDate(String.valueOf(news.getPublishTime()));

66 }

68 private void initWebView() {

69 webView = (WebView) findViewById(R.id.wb_details);

70 LayoutParams params = new 71LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

72 if (!TextUtils.isEmpty(news_url)) {

73 WebSettings settings = webView.getSettings();

74 settings.setJavaScriptEnabled(true);// 設置可以運行JS腳本

75 // settings.setTextZoom(120);//Sets the text zoom of the page in

76 // percent. The default is 100.

77 settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

78 // settings.setUseWideViewPort(true); //打開頁面時，自適應屏幕

79 // settings.setLoadWithOverviewMode(true);//打開頁面時，自適應屏幕

80 settings.setSupportZoom(false);// 用于設置webview放大

81 settings.setBuiltInZoomControls(false);

82 webView.setBackgroundResource(R.color.transparent);

83 // 添加js交互接口類，并起別名 imagelistner

84 webView.addJavascriptInterface(new 85JavascriptInterface(getApplicationContext()), "imagelistner");

86 webView.setWebChromeClient(new MyWebChromeClient());

87 webView.setWebViewClient(new MyWebViewClient());

88 Log.i("info", "news_url:" + news_url);

89 Log.i("info", "news_title:" + news_title);

90 Log.i("info", "news_source:" + news_source);

91 Log.i("info", "news_date:" + news_date);

92 new MyAsnycTask().execute(news_url, news_title, news_source + " " + 93news_date);

94 }

95 }

97 private void initView() {

98 title = (TextView) findViewById(R.id.title);

99 progressBar = (ProgressBar) findViewById(R.id.ss_htmlprogessbar);

100 customview_layout = (FrameLayout) 101findViewById(R.id.customview_layout);

102 // 底部欄目

103 action_comment_count = (TextView) 104findViewById(R.id.action_comment_count);

105

106 progressBar.setVisibility(View.VISIBLE);

107 title.setTextSize(13);

108 title.setVisibility(View.VISIBLE);

109 title.setText(news_url);

110 action_comment_count.setText(String.valueOf(news.getCommentNum()));

111 }

112

113 @Override

114 public void onBackPressed() {

115 super.onBackPressed();

116 overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right);

117 }

118

119 private class MyAsnycTask extends AsyncTask<string, string,="" string=""> {

120

121 @Override

122 protected String doInBackground(String... urls) {

123 String data = NewsDetailsService.getNewsDetails(urls[0], urls[1], urls[2]);

124 Log.i("info", "MyAsnycTask.data:" + data);

125 return data;

126 }

127

128 @Override

129 protected void onPostExecute(String data) {

130 webView.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);

131 }

132 }

133

134 // 注入js函數監聽

135 private void addImageClickListner() {

136 // 這段js函數的功能就是，遍歷所有的img幾點，并添加onclick函數，在還是執137 行的時候調用本地接口傳遞url過去

138 webView.loadUrl("javascript：(function(){" + "var objs = 139document.getElementsByTagName(\"img\");" + "var imgurl=''; "

140 + "for(var i=0;i<objs.length;i++) "="" +="" "{"="" 141"imgurl+="objs[i].src+',';"" objs[i].onclick="function()" {="" 142window.imagelistner.openimage(imgurl);="" }="" "}"="" "})()");="" js通信接口="" 143public="" class="" javascriptinterface="" private="" context="" context;="" 144javascriptinterface(context="" context)="" this.context="context;" void="" 145openimage(string="" img)="" string[]="" imgs="img.split(",");" 146arraylist<string=""> imgsUrl = new ArrayList<string>();

147 for (String s : imgs) {

148 imgsUrl.add(s);

149 Log.i("圖片的URL>>>>>>>>>>>>>>>>>>>>>>>", s);

150 }

151 Intent intent = new Intent();

152 intent.putStringArrayListExtra("infos", imgsUrl);

153 intent.setClass(context, ImageShowActivity.class);

154 intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

155 context.startActivity(intent);

156 }

157 }

158

159 // 監聽

160 private class MyWebViewClient extends WebViewClient {

161 @Override

162 public boolean shouldOverrideUrlLoading(WebView view, String url) {

163 return super.shouldOverrideUrlLoading(view, url);

164 }

165

166 @Override

167 public void onPageFinished(WebView view, String url) {

168 view.getSettings().setJavaScriptEnabled(true);

169 super.onPageFinished(view, url);

170 // html加載完成之后，添加監聽圖片的點擊js函數

171 addImageClickListner();

172 progressBar.setVisibility(View.GONE);

173 webView.setVisibility(View.VISIBLE);

174 }

175

176 @Override

177 public void onPageStarted(WebView view, String url, Bitmap favicon) {

178 view.getSettings().setJavaScriptEnabled(true);

179 super.onPageStarted(view, url, favicon);

180 }

181

182 @Override

183 public void onReceivedError(WebView view, int errorCode, String description, 184String failingUrl)

185 {

progressBar.setVisibility(View.GONE);

super.onReceivedError(view, errorCode, description, failingUrl);

}

private class MyWebChromeClient extends WebChromeClient {

@Override

public void onProgressChanged(WebView view, int newProgress) {

// TODO Auto-generated method stub

if (newProgress != 100) {

progressBar.setProgress(newProgress);

}

super.onProgressChanged(view, newProgress);

}

}</string></objs.length;i++)></string,>

// NewsDetailsService.java

1 package com.topnews.service;

3 import java.io.IOException;

4 import org.jsoup.Jsoup;

5 import org.jsoup.nodes.Document;

6 import org.jsoup.nodes.Element;

8 import android.text.TextUtils;

10 public class NewsDetailsService {

11 public static String getNewsDetails(String url, String news_title,

12 String news_date) {

13 Document document = null;

14 String data = "" +

15 "<center><h2 style="'font-size:16px;'">" + news_title + "</h2></center>";

16 data = data + "<p align="'left'" style="'margin-left:10px'">"

17 + "<span style="'font-size:10px;'">"

18 + news_date

19 + "</span>"

20 + "</p>";

21 data = data + "<hr size="'1'">";

22 try {

23 document = Jsoup.connect(url).timeout(9000).get();

24 Element element = null;

25 if (TextUtils.isEmpty(url)) {

26 data = "";

27 element = document.getElementById("memberArea");

28 } else {

29 element = document.getElementById("artibody");

30 }

31 if (element != null) {

32 data = data + element.toString();

33 }

34 data = data + "";

35 } catch (IOException e) {

36 e.printStackTrace();

37 }

38 return data;

39 }

40 }

以上就是html中如何給圖片添加點擊事件的詳解的詳細內容，

序列表

經過之前關于表格、表單的學習后，再來學習列表，就顯得非常的簡單和容易理解了。

學習是構建知識體系的過程，沒有形成體系的知識學習再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎的初學者，第一次看我的教程，如果時間允許的話，請務必從目錄中找尋第一篇，循序漸進的學習。

列表分為有序列表、無序列表和定義列表，同時列表之中還能嵌套列表，和表格非常相似。

首先介紹有序列表

要用<ol></ol>標簽告訴瀏覽器這里是列表。

然后在里面添加<li></li>標簽，在這個標簽中添加內容即可。

示例代碼如下

<p>我喜歡的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

大家可以把它放到一個新的html框架中看看效果。

完整代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>列表</title>
  </head> 
  <body>
  <h>有序列表</h>
  <p>我喜歡的水果</p>
  <ol> 
    <li>葡萄</li> 
    <li>西瓜</li> 
    <li>蘋果</li> 
    <li>桃子</li>
    </ol>
  </body> 
  </html>

頁面效果如下：

通過修改<ol>標簽中的type屬性我們可以改變序號顯示的樣式，默認的是數字，大家看一下不同的type值的不同效果吧！示例代碼如下：

<ol type="A">
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>
<ol type="a"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
  、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>

頁面效果如下：

下面給大家介紹一下搜狗輸入法中如何輸入羅馬數字。

step1.點擊"輸入方式"

step2.點擊"特殊符號"后選擇數字序號，找到羅馬數字即可

除此之外我們還可以使用CSS的方法為有序列表的序號提供更多樣式。在<ol>標簽中修改style屬性可以直接調用這些css中的屬性。寫法是style="list-style-type:屬性值；"

示例代碼如下：(使用日語中的片假名表示序號)

<ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

頁面效果如圖所示：

是不是很有趣，這里的測試就不一一做了。為大家奉上list-style-type的值的列表與說明，大家自己課下去嘗試，這個列表中既有有序列表的值也有無序列表的值。

如圖：

資料來自w3school

無序列表

無序列表與有序列表的區別在于最外層的標簽，它的寫法是這樣的：<ul></ul>。

有一個記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫為ol。

無序為unorder，無序列表為unorder list，縮寫為ul。

無序列表<ul>標簽的type屬性用來控制列表前的標記顯示演示。

示例代碼如下：

<h>無序列表</h>
<p>我喜歡的水果</p>
<ul> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="disc"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="circle"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="square"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>

頁面效果如下：

通過圖片我們可知，無序列表默認的列表標識就是type="disc"。

style屬性的話大家自己試試吧，這里就不啰嗦了。

定義列表

這個列表比較特殊，也比較不常見，主要就是顯示名詞定義的。

首先要寫入<dl></dl>標簽。這是告訴瀏覽器這里是個定義列表，和<ol>或<ul>一樣。

定義的英文是definition，定義列表就是definition list，縮寫是dl。

下面在<dl></dl>標簽中間寫入定義的名稱<dt></dt>,即definition title（標題）。

與定義名稱標簽并列的是定義描述<dd></dd>,即definition describe（描述）。

示例代碼如下：

<dl> 
  <dt>計算機</dt> 
  <dd>用來計算的儀器 ... ...</dd> 
  <dt>顯示器</dt> 
  <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>

頁面效果如下：

今天的內容結束了！

列表嵌套列表的測試大家自己試試吧，學到現在，相信你們都可以完成了！

如果您喜歡我的教程請關注我，點贊也能讓我充滿動力！

如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

、下面是三種button點擊的方法。

btn.onclick=function(){}
btn.addEventListener("click",function(){})
function btclick(){} 前提是標簽里有onclick="btclick()"

第1種方法參看javascript通過dom實現按鈕點擊事件。【303】
第3種方法參看最簡單的網頁按鈕單擊函數響應事件，基于javascript。【302】

二、第2種方法就看我下面的表現了。

做個按鈕

圖1

圖2

加入javascript，dom取得按鈕元素。

圖3

添加click監聽函數。

圖5

圖6

在線咨詢

上一篇：如何在瀏覽器賬中查看網頁的HTML源代碼？
下一篇：HTML 建立列表-列表標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html中如何給圖片添加點擊事件的詳解

HTML完整學習目錄

您的項目需求