html中如何給圖片添加點(diǎn)擊事件的詳解

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

bind() 方法為被選元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定事件發(fā)生時(shí)運(yùn)行的函數(shù)。

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

規(guī)定向被選元素添加的一個(gè)或多個(gè)事件處理程序，以及當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。

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

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

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

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

data 可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。

function 必需。規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。

實(shí)例：

1 //直接給所有img標(biāo)簽綁定click事件

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

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

4 })

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

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

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

9 })

Html 的img標(biāo)簽添加點(diǎn)擊事件

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);// 設(shè)置需要手勢監(jiān)聽

53 getData();

54 initView();

55 initWebView();

56 }

58 /* 獲取傳遞過來的數(shù)據(jù) */

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);// 設(shè)置可以運(yùn)行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); //打開頁面時(shí)，自適應(yīng)屏幕

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

80 settings.setSupportZoom(false);// 用于設(shè)置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函數(shù)監(jiān)聽

135 private void addImageClickListner() {

136 // 這段js函數(shù)的功能就是，遍歷所有的img幾點(diǎn)，并添加onclick函數(shù)，在還是執(zhí)137 行的時(shí)候調(diào)用本地接口傳遞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 // 監(jiān)聽

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加載完成之后，添加監(jiān)聽圖片的點(diǎn)擊js函數(shù)

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中如何給圖片添加點(diǎn)擊事件的詳解的詳細(xì)內(nèi)容，

用戶上傳證件頁面的布局完成后，查看拍照或從手機(jī)相冊中選圖接---wx.chooseImage()的用法如下：

wx.chooseImage()接口默認(rèn)為上傳多張圖片（最多9張），通過count參數(shù)進(jìn)行設(shè)定。給用戶上傳定義的圖片選擇區(qū)添加click事件，并集成選擇圖片接口到其中，核心代碼如下：

其中，接口返回的locaIIds可以結(jié)合img標(biāo)簽進(jìn)行預(yù)覽使用：

$('.upload_img').html('<img class="preview_img" src="'+localIds+'">');

用戶在客戶端完成選擇圖片后，圖片預(yù)覽效果如圖所示

在選中圖片后，調(diào)用圖片上傳接口可以把圖片上傳到微信公眾平臺成為臨時(shí)素材。圖片上傳成功后，系統(tǒng)會(huì)將圖片的唯一標(biāo)識media_id返回給開發(fā)者，開發(fā)者可以根據(jù)media_id進(jìn)行圖片的其他操作。為了更直觀地查看上傳結(jié)果，首先在圖片選擇區(qū)域下方新增以下html結(jié)構(gòu)：

其次，在選擇圖片接口成功回調(diào)方法里面調(diào)用圖片上傳接口：

上傳成功后會(huì)返回serverID，也就是media_id。運(yùn)行效果所示

、新建項(xiàng)目

1、新建===web項(xiàng)目===輸入項(xiàng)目名稱====完成

二、新建html文件

在新建項(xiàng)目中新建html模板

輸入文件名稱：

三、認(rèn)識基本格式

聯(lián)想出基本格式：

四、編輯html文件

運(yùn)行html，選擇瀏覽器

五、html常用的快捷鍵

（1）ctrl+n+w web項(xiàng)目創(chuàng)建

（2）ctrl+n+h html文檔創(chuàng)建

（3）ctrl+s 保存html頁面（頁面上如果未保存會(huì)顯示*號）

（4）ctrl+r html運(yùn)行
（5）ctrl+z 撤回
（6）！+tab鍵聯(lián)想基本格式
（7）ctrl+/ 注釋和取消注釋

（8）ctrl+鼠標(biāo)滾輪，字體方大和縮小

六、認(rèn)識標(biāo)簽

（1）H標(biāo)簽（標(biāo)題標(biāo)簽）

（2）p標(biāo)簽（段落標(biāo)簽）

（3）img 標(biāo)簽（圖片標(biāo)簽）
兩種：第一種widows上傳圖片，第二種：網(wǎng)上圖片鏈接

第一種

img中顯示圖片

img中引入圖片

第二種：網(wǎng)上圖片的鏈接：

（4）標(biāo)簽（空格）

（5）em 標(biāo)簽表示斜體

（6）i 標(biāo)簽表示斜體

（7）br 表示換行

（8）b 標(biāo)簽表示加粗

（9） strong 標(biāo)簽表示加粗

（10）s 標(biāo)簽（刪除線）

（11）u 標(biāo)簽（下劃線）

（12）font 顏色

（13）sub下標(biāo)
（14）sup上標(biāo)

在線咨詢

上一篇：因?yàn)閷懖怀鐾献б苿?dòng)效果，我惡補(bǔ)了一下Dom中的各種距離
下一篇：一文讀懂HTML和CSS的關(guān)系

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html中如何給圖片添加點(diǎn)擊事件的詳解

您的項(xiàng)目需求