HTML 이미지에 클릭 이벤트를 추가하는 방법에 대한 자세한 설명

먼저 jQuery 선택기를 사용하여 클릭 이벤트를 바인딩하려는 img 요소를 가져온 다음 클릭 메서드를 직접 바인딩하거나 바인딩 메서드를 통해 바인딩할 수 있습니다. 바인딩 방법에 대한 자세한 소개는 다음과 같습니다.

jQuery 이벤트 - 바인딩() 메서드 - 정의 및 사용법

　bind() 메서드는 선택한 요소에 하나 이상의 이벤트 핸들러 프로그램을 추가하고 이벤트가 발생할 때 실행할 함수를 지정합니다.

jQuery 이벤트 - 바인딩() 메서드 - 이벤트 및 함수를 요소에 바인딩

선택한 요소에 추가할 하나 이상의 이벤트 핸들러와 이벤트가 발생할 때 실행할 함수를 지정합니다.

jQuery 이벤트 - 바인딩() 메서드 - 구문

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

jQuery 이벤트 - 바인딩() 메서드 - 매개변수 설명

　이벤트 필수입니다. 요소에 추가할 하나 이상의 이벤트를 지정합니다. 여러 이벤트는 공백으로 구분됩니다. 유효한 이벤트여야 합니다.

　데이터 선택사항. 함수에 전달될 추가 데이터를 지정합니다.

　기능이 필요합니다. 이벤트가 발생할 때 실행할 함수를 지정합니다.

예:

//直接给所有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=&#39;&#39;; "
				+ "for(var i=0;i<objs.length;i++)  " + "{" + "imgurl+=objs[i].src+&#39;,&#39;;" + "    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=&#39;font-size:16px;&#39;>" + news_title + "</h2></center>";
		data = data + "<p align=&#39;left&#39; style=&#39;margin-left:10px&#39;>" 
				+ "<span style=&#39;font-size:10px;&#39;>" 
				+ news_date
				+ "</span>" 
				+ "</p>";
		data = data + "<hr size=&#39;1&#39; />";
		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 이미지에 클릭 이벤트를 추가하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!