html中如何给图片添加点击事件的详解
程序员文章站
2022-04-11 10:08:57
...
首先使用jQuery选择器获取到想要绑定click事件的img元素，然后可以直接绑定click方法，也可以通过bind方法绑定。这里详细介绍一下bind方法。
jQuery 事件 - bind() 方法 —— 定义和用法
bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
jQuery 事件 - bind() 方法 ——将事件和函数绑定到元素
规定向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。
jQuery 事件 - bind() 方法——语法
$(selector).bind(event,data,function)
jQuery 事件 - bind() 方法——参数描述
event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
实例：
//直接给所有img标签绑定click事件
$("img").click(function(){
alert('你点击了图片');
})
//使用bind方法绑定click事件
$("img").bind("click",function(){
alert('你点击了图片');
})
Html 的img标签添加点击事件
package com.topnews;
import java.util.ArrayList;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.Fragment;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.AsyncTask;
import android.os.Bundle;
import android.text.TextUtils;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebSettings.LayoutAlgorithm;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ProgressBar;
import android.widget.TextView;
import com.topnews.base.BaseActivity;
import com.topnews.bean.NewsEntity;
import com.topnews.service.NewsDetailsService;
import com.topnews.tool.BaseTools;
import com.topnews.tool.DataTools;
import com.topnews.tool.DateTools;
@SuppressLint("JavascriptInterface")
public class DetailsActivity extends BaseActivity {
private TextView title;
private ProgressBar progressBar;
private FrameLayout customview_layout;
private String news_url;
private String news_title;
private String news_source;
private String news_date;
private NewsEntity news;
private TextView action_comment_count;
WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.details);
setNeedBackGesture(true);// 设置需要手势监听
getData();
initView();
initWebView();
}
/* 获取传递过来的数据 */
private void getData() {
news = (NewsEntity) getIntent().getSerializableExtra("news");
news_url = news.getSource_url();
news_title = news.getTitle();
news_source = news.getSource();
news_date = DateTools.getNewsDetailsDate(String.valueOf(news.getPublishTime()));
}
private void initWebView() {
webView = (WebView) findViewById(R.id.wb_details);
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
if (!TextUtils.isEmpty(news_url)) {
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);// 设置可以运行JS脚本
// settings.setTextZoom(120);//Sets the text zoom of the page in
// percent. The default is 100.
settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
// settings.setUseWideViewPort(true); //打开页面时， 自适应屏幕
// settings.setLoadWithOverviewMode(true);//打开页面时， 自适应屏幕
settings.setSupportZoom(false);// 用于设置webview放大
settings.setBuiltInZoomControls(false);
webView.setBackgroundResource(R.color.transparent);
// 添加js交互接口类，并起别名 imagelistner
webView.addJavascriptInterface(new JavascriptInterface(getApplicationContext()), "imagelistner");
webView.setWebChromeClient(new MyWebChromeClient());
webView.setWebViewClient(new MyWebViewClient());
Log.i("info", "news_url:" + news_url);
Log.i("info", "news_title:" + news_title);
Log.i("info", "news_source:" + news_source);
Log.i("info", "news_date:" + news_date);
new MyAsnycTask().execute(news_url, news_title, news_source + " " + news_date);
}
}
private void initView() {
title = (TextView) findViewById(R.id.title);
progressBar = (ProgressBar) findViewById(R.id.ss_htmlprogessbar);
customview_layout = (FrameLayout) findViewById(R.id.customview_layout);
// 底部栏目
action_comment_count = (TextView) findViewById(R.id.action_comment_count);
progressBar.setVisibility(View.VISIBLE);
title.setTextSize(13);
title.setVisibility(View.VISIBLE);
title.setText(news_url);
action_comment_count.setText(String.valueOf(news.getCommentNum()));
}
@Override
public void onBackPressed() {
super.onBackPressed();
overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right);
}
private class MyAsnycTask extends AsyncTask<String, String, String> {
@Override
protected String doInBackground(String... urls) {
String data = NewsDetailsService.getNewsDetails(urls[0], urls[1], urls[2]);
Log.i("info", "MyAsnycTask.data:" + data);
return data;
}
@Override
protected void onPostExecute(String data) {
webView.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);
}
}
// 注入js函数监听
private void addImageClickListner() {
// 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，在还是执行的时候调用本地接口传递url过去
webView.loadUrl("javascript:(function(){" + "var objs = document.getElementsByTagName(\"img\");" + "var imgurl=''; "
+ "for(var i=0;i<objs.length;i++) " + "{" + "imgurl+=objs[i].src+',';" + " objs[i].onclick=function() " + " { "
+ " window.imagelistner.openImage(imgurl); " + " } " + "}" + "})()");
}
// js通信接口
public class JavascriptInterface {
private Context context;
public JavascriptInterface(Context context) {
this.context = context;
}
public void openImage(String img) {
//
String[] imgs = img.split(",");
ArrayList<String> imgsUrl = new ArrayList<String>();
for (String s : imgs) {
imgsUrl.add(s);
Log.i("图片的URL>>>>>>>>>>>>>>>>>>>>>>>", s);
}
Intent intent = new Intent();
intent.putStringArrayListExtra("infos", imgsUrl);
intent.setClass(context, ImageShowActivity.class);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
context.startActivity(intent);
}
}
// 监听
private class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return super.shouldOverrideUrlLoading(view, url);
}
@Override
public void onPageFinished(WebView view, String url) {
view.getSettings().setJavaScriptEnabled(true);
super.onPageFinished(view, url);
// html加载完成之后，添加监听图片的点击js函数
addImageClickListner();
progressBar.setVisibility(View.GONE);
webView.setVisibility(View.VISIBLE);
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
view.getSettings().setJavaScriptEnabled(true);
super.onPageStarted(view, url, favicon);
}
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
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);
}
}
}
// NewsDetailsService.java
package com.topnews.service;
import java.io.IOException;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import android.text.TextUtils;
public class NewsDetailsService {
public static String getNewsDetails(String url, String news_title,
String news_date) {
Document document = null;
String data = "<body>" +
"<center><h2 style='font-size:16px;'>" + news_title + "</h2></center>";
data = data + "<p align='left' style='margin-left:10px'>"
+ "<span style='font-size:10px;'>"
+ news_date
+ "</span>"
+ "</p>";
data = data + "<hr size='1' />";
try {
document = Jsoup.connect(url).timeout(9000).get();
Element element = null;
if (TextUtils.isEmpty(url)) {
data = "";
element = document.getElementById("memberArea");
} else {
element = document.getElementById("artibody");
}
if (element != null) {
data = data + element.toString();
}
data = data + "</body>";
} catch (IOException e) {
e.printStackTrace();
}
return data;
}
}
以上就是html中如何给图片添加点击事件的详解的详细内容，更多请关注其它相关文章！
推荐阅读
-
详解如何在Canvas中添加事件的方法
-
如何将 html 中 的鼠标hover事件，改为 鼠标点击事件_html/css_WEB-ITnose
-
html中如何给图片添加点击事件的详解
-
关于html5如何在canvas中插入图片的示例详解
-
关于html5如何在canvas中插入图片的示例详解
-
关于html5中如何调用相机拍照并且压缩图片的示例详解
-
解决在html中给button按钮添加了@click事件控制v-if或者v-show无效的问题
-
html中如何给图片添加点击事件的详解
-
关于html5中如何调用相机拍照并且压缩图片的示例详解
-
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件_html5教程技巧